1

我尝试制作 > 1.input在新图层中输入动态更新值 >
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
4

2 回答 2

0

我会以稍微不同的方式做

$('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('')
})
于 2013-03-13T00:12:10.027 回答
0

TLDR：jsFiddle 演示

起初您的代码中有一个简单的问题。您在这里使用此代码为每个元素重新分配了一个点击事件

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

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

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

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();
  }
});
于 2013-03-13T00:01:56.650 回答