CODEWITHSUNDEEP
jquery
user3195616
user3195616

Reputation: 305

stopping event handler on a single element

I have a set of text areas which are added dynamicly, with specific text in them. I want the text to be removed from the text area when it gets focus but dont remove newly entered text when it gets focus again. This is the code I have and it keeps removing the text every time the text area gets focus again.

---- 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>

---- and this is a 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(' ');    }
});

I tried it in different browsers - same thing, any newly entered text disapering when text area get focus again. Thanks

Upvotes: 1

Views: 41

Answers (3)

Thomas Scheinecker
Thomas Scheinecker

Reputation: 111

I think you are actually looking for the 'placeholder' attribute:

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

A javascript solution is only required in case of a browser <= IE9

Basically you'll need a solution like the one Aron P Johny supplied. Here is an example without the ':not' which just requires the initial elements to have an additional class:

$('#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('');
      });    
    }
});

For the placeholder version this is much simpler:

$('#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

Upvotes: 1

Artur Filipiak
Artur Filipiak

Reputation: 9157

You should use .one() instead of .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

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

The click handler is added to the #mix not the .mix1ta:not element so $(this).off('click'); will not have any effect.

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

Demo: Fiddle

Upvotes: 0

Related Questions