Javascript 双击时每个单词都是可编辑的

我正在工作

我喜欢在双击单词时，段落中的每一个单词都可以在文本框中编辑，而当聚焦出来时（当点击页面的空白部分时），该单词会被新输入的内容覆盖

我试过了，但不得不使用

和

标记，这不太实用。还有几个问题：

-当文本框中有多个单词时，双击仅显示第一个单词。（只需编辑标签“dolor sit” “amet”，它只显示“dolor”）

-双击时，有时会选择所有内容（蓝色），但无法找到解决方案

-文本框的大小不会根据单词的长度进行调整。也许很容易，但我错过了一些东西

你能帮我拿一下吗

1）

如果oriVal是
word1 word2
，则
“
将变为
”
。查看您如何缺少引号，浏览器将把word1作为
value
属性的值，并将word2视为布尔标志属性。将其更改为
”
，您会没事的

然而，更好的方法是
var ele=$（“”）；ele.val（oriVal）
。这将解决所有引用和转义问题

2） CSS
user select:none
（您可能需要添加供应商前缀，如
-webkit user select:none
）适用于大多数现代浏览器，对于较旧的浏览器有一些技巧

3） 这并不容易，尤其是关于浏览器兼容性问题。为什么不尝试使用
contenteditable
，而不是使用文本输入字段。现在几乎所有浏览器都支持它。
有些问题已经解决。您可以参考这一点（我认为这可能对您有所帮助）

1.当文本框中有多个单词时，双击时只显示第一个单词。（只需编辑标签“dolor sit amet”，它只显示“dolor”）

使用
“

2.文本框的大小没有根据单词的长度进行调整。可能很简单，但我遗漏了一些东西

找到所选
li
的宽度，并将该宽度应用于
文本框

    var width = $(this).width();
    $(this).text("");
    $("<input type='text'    style='width:"+width+"px'value='"+oriVal+"'>").appendTo(this);

使用CSS
user select:none
禁用文本选择，当用户单击
dblclick
时，这将消除蓝色选择。您是否尝试将
contenteditable
添加到html标记而不是JS？这是文本编辑器中的html构建。谢谢，但它在键入时仍然不会响应输入的宽度。您好输入也应该完成编辑（焦点向外）。你能更新演示吗？我会检查答案是否正确。
$("#parentUL").on('keyup','li', function(e){
     var width = $(this).width();
    if(e.which == 13) {
        $("input").focusout();
    }else{
       $("input").css('width',width);
    }
    });