如何选择，聚焦文本区域

How to select, focused textarea?

本文关键字：聚焦 文本 区域 选择 何选择      更新时间：2023-09-26

我有两个textarea，我想当我按下enter时，如果textarea的length小于5，则向其添加一个类。实际上我的问题是，类将被添加为两个textarea。我怎么能添加类，只是一个textarea的焦点?

这里有一把小提琴。下面是我的代码: 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;         
        }  
   }
});

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

这是你更新的代码，我把文本区域到一个变量，它是更有效的不选择它一遍又一遍。http://jsfiddle.net/86829ryz/8/

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

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

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

关于MDN上的:focus伪类

试试这个-

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

试试下面的代码，

你可以使用jQuery each和.is(":focus")从这里找到更多的信息。

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

更新:

我不知道为什么你使用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/

问题我发现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;
    }
  }
});

演示

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

更新:Chrome没有找到这个event错误，但其他浏览器做。如果没有定义，Chrome将此event设置为触发事件。

相关文章：