Question

我有一组动态添加的文本区域，其中包含特定文本。我希望文本在获得焦点时从文本区域中删除，但是当它再次获得焦点时不要删除新输入的文本。这是我的代码，每次文本区域再次聚焦时，它都会不断删除文本。

---- html ----

<div id='mix'>
   <input type='button' value='TA test' id='mix6b'/>
   <div id='mix_tas'>
      <textarea cols="10" rows="2" class='mix1ta' wrap="OFF">text     1</textarea>    <textarea cols="10" rows="2" class='mix1ta' wrap="OFF">
      text 2   </textarea>   <br/>
   </div>              
   <div id="mix7d"> </div> 
</div>

----这是一个jquery ----

$('#mix6b').on('click',function(){
    $('<textarea cols="10" rows="2" index="mix3ta">').addClass('mix1ta').val('text 3').appendTo('#mix_tas');
});
$('#mix').on('click','.mix1ta', function(){     
    $(this).val(' ');  $(this).off('click');  // $('#mix').off('click', '#mix3ta', donothing );   
});
$('#mix').on('keydown', '.mix1ta', function(e){ 
    if(e.keyCode===13 && e.shiftKey===false){       var v1=$(this).val();   $('#mix7d').append(v1);    $(this).val(' ');    }
});

我在不同的浏览器中尝试过它 - 同样的事情，当文本区域再次聚焦时，任何新输入的文本都会丢失。感谢

Answer 1

我认为您实际上在寻找'占位符'属性：

http://www.w3schools.com/tags/att_textarea_placeholder.asp

只有在浏览器＆lt; = IE9

的情况下才需要javascript解决方案

基本上你需要像Aron P Johny提供的解决方案。这是一个没有'：not'的例子，它只需要初始元素有一个额外的类：

$('#mix6b').on('click',function(){
$('<textarea cols="10" rows="2" index="mix3ta">')
  .addClass('mix1ta pristine')
  .val('text 3')
  .appendTo('#mix_tas');
});
$('#mix').on('click','.mix1ta.pristine', function(){     
    $(this)
      .val('')
      .removeClass('pristine'); 
});
$('#mix').on('keydown', '.mix1ta', function(e){ 
    if(e.keyCode===13 && e.shiftKey===false){       
      var textarea = $(this);
      $('#mix7d').append(textarea.val());    
      textarea.one('keyup', function() {
        textarea.val('');
      });    
    }
});

对于占位符版本，这更简单：

$('#mix6b').on('click',function(){
    $('<textarea cols="10" rows="2" index="mix3ta">')
      .addClass('mix1ta')
      .attr('placeholder', 'text 3')
      .appendTo('#mix_tas');
});
$('#mix').on('keydown', '.mix1ta', function(e){ 
    if(e.keyCode===13 && e.shiftKey===false){       
      var textarea = $(this);
      $('#mix7d').append(textarea.val());    
      textarea.one('keyup', function() {
        textarea.val('');
      });    
    }
});

http://plnkr.co/edit/oOVvKwOTWSVsL5lXZUgd?p=preview

Answer 2

点击处理程序已添加到#mix而不是.mix1ta:not元素，因此$(this).off('click');不会产生任何影响。

$('#mix').on('click', '.mix1ta:not(.cleared)', function () {
    $(this).val('').addClass('cleared');
});

演示：Fiddle

Answer 3

您应该使用.one()代替.on()：

$('#mix6b').on('click',function(){
    $('<textarea cols="10" rows="2" class="mix1ta" index="mix3ta" />').val('text 3').appendTo('#mix_tas').one('click', function(){     
        $(this).val(' ');   
    });
});

// this applies only to existing textarea elements. Not these created dynamically.
// if you don't want to clear them, delete this:
$('.mix1ta').one('click', function(){       
    $(this).val(' ');  
});

$('#mix').on('keydown', '.mix1ta', function(e){ 
    if(e.keyCode===13 && e.shiftKey===false){       var v1=$(this).val();   $('#mix7d').append(v1);    $(this).val(' ');    }
});

DEMO

停止单个元素上的事件处理程序

3 个答案: