Question

我有以下结构

<div>
<ul id='t1'>
  <li id='l1' contenteditable='true' class='editable'> Lorem ipsum </li>
  <li id='l2' contenteditable='true' class='editable'> Lorem ipsum </li>
  <li id='l3' contenteditable='true' class='editable'> Lorem ipsum </li>
</ul>
</div>

我想要的是当用户编辑说li l3并且当他点击进入时我想在新li上添加具有contenteditable = true和setfocus的新li，以便用户可以在那里开始输入。我能够在输入时添加一个新条目，但无法设置焦点。

更新

 if(e.keyCode == 13){//enter Key or tab key 9
    e.preventDefault();
    var taskId = this.id;
    jQuery.ajax({
        url : 'update_current',
        type : 'put',
        success : function(resp){ //resp is the new li tag
          var li =  this_is_current_elemtn;
          jQuery(li).append(resp);

          //$('#t1 .editable').each(function(){
            // $(this).attr('editable', 'false');
          //});
          console.log(jQuery(li).next());

           jQuery(li).next().focus();
         // $('#t1 .editable').each(function(){
         //    $(this).attr('contentEditable', 'true');
         // });
        }
    });

感谢任何帮助

Answer 1

我知道它有点迟了但是无论如何，如果你将'contenteditable ='true'添加到父ol或ul，它就可以了！：）

Answer 2

试试这个：http://jsfiddle.net/t7GJc/

$('#t1').on('keydown', 'li', function(e){
    var c = e.which || e.keyCode;
    if(c === 13){
        e.preventDefault();                    
        if($(this).is($('#t1 li:last'))){
            $(this).after($('<li id="l'+($('#t1 li').length + 1)+'" contenteditable="true"/>'));
        }
        $(this).next().focus();
    }
});

Answer 3

jsfiddle

    $("ul").on("keyup", "li",function(e){
    if(e.keyCode == 13){
     var elem = $( "<li contenteditable='true'> Lorem ipsum </li>").appendTo ($(this).parent());
         elem.focus();
}
        return false;

    });

使下一个contenteditable元素可编辑

3 个答案: