动态更新输入文字值

我试着使> 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

来源

2013-03-12 vibskov

TLDR：jsFiddle Demo

有一个简单的问题首先在你的代码。你被重新分配这里

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

与此代码click事件的每一个元素，因此第一个问题是只解决其连接到一个点击事件的新元素。

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

HTML同上

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-13 00:01:56

我会做的方式略有不同

$('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-13 00:12:10 vittore

动态更新输入文字值

回答

相关问题