如何选择，专注textarea？(How to select, focused textarea?)

如何选择，专注textarea？(How to select, focused textarea?)

我有两个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; } } });

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

最满意答案

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

关于：MDN上的焦点伪类

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