Question

我尝试制作＆gt; 1.在新图层中键入input动态更新值＆gt;
2.单击输入中显示的值的图层，然后可以再次编辑 http://jsfiddle.net/8yZhf/3/

但我陷入了2.如果使用$('.input').off("focus")来避免添加新图层（不更新），则完成修改和focusout后，如何像以前一样恢复focus？或者更好的主意？

var layer;
$('.input').focus(function(){
    layer = $('.input_insert').children('div').length + 1;
    $('<div class='+layer+'></div>').appendTo('.input_insert');// add layer

    $('.input_insert').children('div').click(function(e){
        $('.input').val($(e.target).html());
        // $('.input').off("focus");
    })
    return layer;// return layer count for keyup, focusout
})
$('.input').keyup(function(e){
    $('.'+layer).html(this.value);
})
$('.input').focusout(function(){
    $("input[class='input']").val('');
    if($('.'+layer).html() == ''){// check if empty
        $('.'+layer).remove();
    }
})

HTML

<input type="text" class="input">
<div class="input_insert"></div>// container

Answer 1

TLDR： jsFiddle Demo

您的代码中最初有一个简单的问题。您正在使用此代码重新为每个元素分配一个click事件

$('.input_insert').children('div').click(function(){
    $('.input').val($('.'+layer).html());
    // $('.input').off("focus");
})

所以第一个问题是只解决将新元素连接到click事件的问题。

下一个问题是，由于只有一个变量跟踪图层，因此只使用了最新的图层。这可以通过实施额外的跟踪变量来解决。

html与上面相同

JS

var layer;
var target = -1;//when not -1, this indicates a layer is being edited
$('.input').focus(function(){
 layer = $('.input_insert').children('div').length + 1;
 //save the value of the layer for use on click event
 var current = layer;
 $('<div class='+layer+'></div>').appendTo('.input_insert');// add layer
 //wire click only to the new layer
 $('.'+current).click(function(){
  $('.input').val($(this).html());
  //indicate that this layer is the edit target when clicked
  target = current;
 });
 return layer;// return layer count for keyup, focusout
});
$('.input').keyup(function(e){
 //check if there is a layer being edited
 if( target > -1 ){//layer edit
   $('.'+target).html(this.value);
 }else{//new layer
  $('.'+layer).html(this.value);
 }
});
$('.input').focusout(function(){
 //reset target because there is no current edit
 target = -1;
 $("input[class='input']").val('');
  if($('.'+layer).html() == ''){// check if empty
   $('.'+layer).remove();
  }
});

Answer 2

我会采用稍微不同的方式

$('input').on('keypressed', function(e) {
   $('.input_insert:last-child').text($(this).val())  
}).on('blur', function(e) {
   var val = $(this).val() 
   , lastInsert = $('.input_insert:last-child').text('')
   , newInsert = $('<div />').addClass('input_insert')
                             .text(val).insertBefore(lastInsert) 
   $(this).val('')
})

动态更新输入文本值

2 个答案: