如何选择重点突出的文本区域？

Question

我有两个textarea，当我按enter时，如果length of textarea小于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;         
        }  
   }
});

Answer 1

将您的$('textarea')选择器更改为$('textarea:focus')似乎可以做到这一点。

下面是您更新的代码，我将textarea放入一个变量中，避免一次又一次地选择它，效率更高。http://jsfiddle.net/86829ryz/8/

正如注释中所建议的那样，我还将event.shiftKey更改为e.shiftKey，因为您从未将事件放在参数中。

我还为事件添加了一个选择器，因此它只能在文本区域中工作。否则，即使您没有专注于任何事情，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;        
        }  
   }

});

关于:将伪类集中在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

试试这个-

​

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

​