如何使用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单击编辑输入值

回答

相关问题