如何使用JQuery單擊編輯輸入值

我正在嘗試使用JQuery構建思維導圖工具，並且我正在努力編輯div內容。如何使用JQuery單擊編輯輸入值

我寫了一個函數，允許我將文本添加到（mind-container）div。它運作良好。但是，一旦它被設置，它不會讓我編輯文本。

這是一個活生生的例子：https://jsfiddle.net/TiOw87/c9wwe81d/5/

這裏是我的jQuery函數：

$('.mind-container').click(function(){ 
    $('input').addClass('active'); 
    $('input').parent().find('input').focus(); 
    $('input').keyup(function(event){ 
     if(event.keyCode == 13){ 
      var string = $(this).val(); 
      $(this).removeClass('active'); 
       if ($(this).has("p")) 
      { 
       $(this).parent().html("<p>"+ string +"</p>") 
      } 
      else 
      { 
       $(this).parent().append("<p>"+ string +"</p>") 
      } 
     } 
    }) 
});

而我的HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<body> 

    <div id='board'> 
    <div class='mind-container' id='mind-master'> 
     <input type="text"> 
    </div> 

    </div> 

</body>

我想能夠點擊div並能夠編輯已經在其中的輸入文本的值。

感謝您的幫助

來源

2016-11-27 RayedB

爲什麼不在你的div上使用'contenteditable'屬性？在這裏閱讀http://html5demos.com/contenteditable，並在這裏 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content –

這裏的問題是你的has()使用。 http://api.jquery.com/has/has()減少了匹配的元素集合，它不返回布爾值。由於一個jQuery對象總是真的，邏輯執行第一個條件，使用html()來替換div的全部內容和p字符串。作爲副作用，您的輸入框不再需要與之交互。

更改條件爲has(...).length將解決始終存在的問題，但通過執行html()刪除輸入框的潛在問題仍然存在。

請注意，在keyup處理程序中執行嵌套綁定還有另一個問題，這將導致多個綁定。你也應該解決這個問題。

來源

2016-11-27 15:30:00 Taplar

謝謝你的回答。我天真地認爲這會返回一個布爾值。添加.length解決了我的條件問題。我還在我的功能的第一行中添加了一個$（'p'，this），因此在保存編輯之前先前的輸入將被刪除。但是我還有另一個問題，就是div被點擊的次數。例如，第一次給出值「1」並正確顯示。再次單擊，用「Hello」替換「1」，然後顯示「HelloHello」。就像因爲您第一次點擊輸入1而第二次點擊進行編輯，它會運行兩次函數 – RayedB

正確，因爲我在最後一部分提到了嵌套綁定。您不應該將事件處理程序重複綁定到單個元素。 – Taplar

如何使用JQuery單擊編輯輸入值

回答

相關問題