CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Shafizadeh
Shafizadeh

Reputation: 10360

How to select, focused textarea?

I have two textarea and I want when I press enter, if the length of textarea is less than 5 then add a class to it. actually my problem is that class will be added for two textarea. How can I add that class, just for one textarea that is focused ?

Here is a fiddle. And here is my codes:

HTML:

<textarea id="textarea-1" name="t_comment"></textarea>
<textarea id="textarea-2" name="t_comment"></textarea>

CSS:

.t_border{
    border:2px dashed;
}

Jquery:

$( document ).on( 'keydown', function ( e ) {
    if (e.keyCode===13){
        if($('textarea', this).val().length <= 5 && !event.shiftKey){
            $('textarea').toggleClass("t_border");
            setTimeout( function(){$('textarea').toggleClass("t_border");}, 400);   
            return false;         
        }  
   }
});

Upvotes: 0

Views: 261

Answers (5)

J Santosh
J Santosh

Reputation: 3847

Issue i found in OP is !event.shiftKey . you defined event as e in function but using it as event

I don't want to change your logic. this kind of answer is already posted, but OP logic was modified.

JS

$('textarea').on('keydown', function(e) {
  var self = this; // the textarea is used in setTimeout so can't use this keyword in that function. so set it to some var
  if (e.keyCode === 13) {
    if ($(self).val().length <= 5 && !e.shiftKey) {
      $(self).toggleClass("t_border");
      setTimeout(function() {
        $(self).toggleClass("t_border");
      }, 400);
      return false;
    }
  }
});

Demo

Note: textarea selector will refer all textarea elements in the DOM, so when working with multiple elements that have same selector using this keyword will refer to that one particular element only instead of referring all elements.

Update : Chrome doesn't find this event error but other browser do. Chrome sets this event to the triggered event if it is not defined.

Upvotes: 2

Talya S
Talya S

Reputation: 754

Changing your $('textarea') selectors to $('textarea:focus') seems to do the trick.

Here is your updated code, I put the textarea into a variable, it's more efficient not to select it over and over again. http://jsfiddle.net/86829ryz/8/

As suggested in the comments I also changed event.shiftKey to e.shiftKey, as you never put event in your parameters.

I also added a selector to the event so it will only work in textareas. Otherwise keydown even when you're not focused on anything fires the event and returns an error in the console. This actually makes my whole :focus solution kind of redundant, var textarea = $(this); would work too because the event fires from the textarea. But at least now you know how to select an element that's focused, which was the original question.

$( document ).on( 'keydown', 'textarea', function ( e ) {
    if (e.keyCode===13){
        var textarea = $('textarea:focus');
        if(textarea.val().length <= 5 && !e.shiftKey){
            textarea.toggleClass("t_border");
     setTimeout( function(){textarea.toggleClass("t_border");}, 400);   
                 return false;        
        }  
   }

});

About the :focus pseudo-class on MDN

Upvotes: 3

DinoMyte
DinoMyte

Reputation: 8868

Updated :

I'm not sure why you were using setTimeout but try this : 

<textarea id="textarea-1" name="t_comment" class="t_border"></textarea>
<textarea id="textarea-2" name="t_comment" class="t_border"></textarea>

$( document ).on( 'keydown', function ( e ) {
    if (e.keyCode===13)
    {

        $('textarea:focus').each(function()
        {
            if($(this).val().length <= 5 && !e.shiftKey)
            {
                $(this).toggleClass("t_border");                      
            } 
        });
   }    

});

.t_border{
    border:2px dashed;  
}

Fiddle : http://jsfiddle.net/86829ryz/6/

Upvotes: 2

jlocker
jlocker

Reputation: 1488

Try the below code,

You can use jQuery each with .is(":focus") find more information from here each and is

$(document).on('keydown', function(e) {
  $('textarea').each(function() {
    if ($(this).is(":focus")) {
      var that = this;
      if (e.keyCode === 13) {
        if ($(that).val().length <= 5 && !event.shiftKey) {
          $(that).addClass("t_border");
          setTimeout(function() {
            $(that).removeClass("t_border");
          }, 400);
          return false;
        }
      }
    }

  });

});
.t_border {
  border: 2px dashed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="textarea-1" name="t_comment"></textarea>
<textarea id="textarea-2" name="t_comment"></textarea>

Upvotes: 2

Xahed Kamal
Xahed Kamal

Reputation: 2223

Try this -

$( document ).on( 'keydown', 'textarea', function ( e ) {
	if (e.keyCode===13){
        if($(this).val().length <= 5 && !e.shiftKey){
      		$(this).addClass("t_border");	
   			return false;	      
        } else {
        	 $(this).removeClass("t_border");
        } 
   }
});
.t_border{
    border:2px dashed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="textarea-1" name="t_comment"></textarea>
<textarea id="textarea-2" name="t_comment"></textarea>

Upvotes: 2

Related Questions