Question

我正在尝试找到在双击时使列表元素可编辑的最佳方法。如果我有这样的设置：jsfiddle

HTML

<ul>
    <li>Hello</li>
    <li>World</li>
</ul>

JS

$('li').dblclick(function() {
   //something here?
});

对双击操作进行编码的最佳方法是什么才能让我更改单击列表元素的值？

Answer 1

这使用contentEditable

$('li').dblclick(function() {
   this.contentEditable=true
   $(this).on('keypress blur', function(e) {
     if(e.keyCode&&e.keyCode==13||e.type=='blur'){
      this.contentEditable=false
      return false
     }
   });
   $(this).focus()
});

http://jsfiddle.net/sjfqX/9/

修改

添加焦点（）。 thx @ L105

Answer 2

在HTML5中，您可以使用contenteditable。单击window以删除属性。

编辑 - 我结合了一些答案，这应该可以胜任：

$('li').on({
    dblclick: function() {
        $(this).attr('contenteditable', 'true').focus();
    },

    keydown : function(e) {
            if(e.keyCode && e.keyCode === 13) {
                e.preventDefault();
                $(this).blur();
            }       
     },

    blur: function() {
         $(this).removeAttr('contenteditable');
     }
});

<强> DEMO

Answer 3

DEMO

var $elem = $(this);
var mytext = $elem.text();
$elem.html('<input type="text" class="foo" value="' + mytext + '" />');

Updated DEMO

$('li').dblclick(function() {
var $elem = $(this);
var mytext = $elem.text();
$elem.html('<input type="text" class="foo" value="' + mytext + '" /> <span class="save">Save!</span>');
    $(".save").click(function() {
        var mynewtext = $(this).parent().find(".foo").val();
        $elem.html(mynewtext);
    });
});

如何使列表元素可编辑

3 个答案: