javascript - 双击可编辑每个单词

Question

Here's the fiddle我正在尝试。

我喜欢段落中的每一个词在双击时都可以在文本框中进行编辑 - 并且在聚焦时(当单击页面的空白部分时)用新输入更新词。

我试过了，但不得不使用 <ul>和 <li>标签，这不是很实用。还有几个问题:

-When there's more than one word in the textbox, it only shows the first word when double clicked. (Just try to edit the tag 'dolor sit amet', it only shows 'dolor')

-As double clicked, sometimes it selects everything (in blue), could not find a solution to that.

-The size of textbox is not adjusted to the length of the word. Probably it's easy but I miss something.

你能帮我做这些吗？

Answer 1

有些问题已经解决了。你可以引用这个(我认为这可能对你有帮助)。

1.When there's more than one word in the textbox, it only shows the first word when double clicked. (Just try to edit the tag 'dolor sit amet', it only shows 'dolor')

使用 "<input type='text' value="+oriVal+">"

2.The size of textbox is not adjusted to the length of the word. Probably it's easy but I miss something.

求出选中的宽度li并将该宽度应用于 text box .

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

您可以查看演示here .

更新

根据您的要求，我更新了答案。

取决于text在 input box width的 text box应该在 keypress/keyup 上改变事件。

还有 input box应该focus out在 enter key press .

$("#parentUL").on('keyup','li', function(e){
     var width = $(this).width();
    if(e.which == 13) {
        $("input").focusout();
    }else{
       $("input").css('width',width);
    }
    });