Question

我有两个textarea我希望当我按enter时，如果length的{{1}}小于5，则为其添加一个类。实际上我的问题是将为两个textarea添加课程。如何添加该课程，仅针对一个专注的textarea？

Here is a fiddle。这是我的代码：

HTML：

textarea

CSS：

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

Jquery的：

.t_border{
    border:2px dashed;
}

Answer 1

将$('textarea')选择器更改为$('textarea:focus')似乎可以解决问题。

这是您更新的代码，我将textarea放入变量中，不再一次又一次地选择它更有效。 http://jsfiddle.net/86829ryz/8/

根据评论中的建议，我还将event.shiftKey更改为e.shiftKey，因为您从未在参数中添加事件。

我还为事件添加了一个选择器，因此它只能在textareas中使用。否则keydown即使您没有专注于任何事情也会触发事件并在控制台中返回错误。 这实际上使我的整个:focus解决方案变得多余，var textarea = $(this);也会起作用，因为事件是从textarea触发的。但至少现在你知道如何选择一个专注的元素，这是最初的问题。

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

Answer 2

更新：

我不确定你为什么要使用setTimeout但是试试这个：

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

小提琴：http://jsfiddle.net/86829ryz/6/

Answer 3

OP中发现的问题是!event.shiftKey。您在事件中将事件定义为e，但将其用作event

我不想改变你的逻辑。这种答案已经发布，但OP逻辑已被修改。

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

注意： textarea选择器将引用DOM中的所有textarea元素，因此当使用this关键字处理具有相同选择器的多个元素时，将引用该特定的一个元素而不是引用所有元素。

更新：Chrome没有找到此event错误，但其他浏览器也没有。如果未定义，Chrome会将此event设置为触发事件。

如何选择，专注textarea？

3 个答案: