jQueryを使用してフォーカス要素を取得する方法
4175 ワード
How to get the focused element with jQuery?
Using jQuery, how can I get the input element that has the caret's (cursor's) focus? jQueryを使用して、挿入記号(カーソル)の焦点を持つ入力要素をどのように取得しますか?
Or in other words, how to determine if an input has the caret's focus? あるいは、入力に挿入記号の焦点があるかどうかをどのように決定しますか?
1階
参照先:https://stackoom.com/question/lJv3/jQueryを使用してフォーカス要素を取得する方法
2階
jQueryドキュメントの推奨事項に従ってDOMツリー全体を検索することなく取得
#3階
Which one should you use? どちらを使うべきですか.quoting the jQuery docs:jQueryドキュメントを参照:
As with other pseudo-class selectors (those that begin with a ":"), it is recommended to precede :focus with a tag name or some other selector; 他の擬似クラスセレクタ(":"で始まるもの)と同様に、タグ名または他のセレクタを使用してフォーカスすることをお勧めします.otherwise,the universal selector("*")is implied.そうでなければ、汎用セレクタ("*").In other words,the bare
The answer is:答えは:
And if you want a jQuery object wrapping the element:パッケージ要素のjQueryオブジェクトがほしい場合:
#4階
Try this:これを試してみてください.
#5階
I've tested two ways in Firefox, Chrome, IE9 and Safari. Firefox,Chrome,IE 9,Safariで2つの方法をテストした.
(1). (1).
(2). (2).
I moved into the mouse to input 'name' and pressed Enter on keyboard, then I tried to get the focused element. マウスを動かして「name」と入力し、キーボードでEnterキーを押してフォーカス要素を取得しようとしました.
(1). (1).
(2). (2).
#6階
How is it noone has mentioned.. どうして誰も言及しなかったの?
I am using IE8, and have not tested it on any other browser. IE 8を使用していますが、他のブラウザではテストされていません.In my case, I am using it to make sure a field is a minimum of 4 characters and focused before acting. 私の場合、1つのフィールドの少なくとも4文字を確保し、演技する前に集中するために使用しています.Once you enter the 4th number, it triggers. 4番目の数字を入力するとトリガーされます.The field has an id of 'year'. このフィールドのIDは「年」です.I am using.. 私は使っています.
Using jQuery, how can I get the input element that has the caret's (cursor's) focus? jQueryを使用して、挿入記号(カーソル)の焦点を持つ入力要素をどのように取得しますか?
Or in other words, how to determine if an input has the caret's focus? あるいは、入力に挿入記号の焦点があるかどうかをどのように決定しますか?
1階
参照先:https://stackoom.com/question/lJv3/jQueryを使用してフォーカス要素を取得する方法
2階
$( document.activeElement )
jQueryドキュメントの推奨事項に従ってDOMツリー全体を検索することなく取得
#3階
// Get the focused element:
var $focused = $(':focus');
// No jQuery:
var focused = document.activeElement;
// Does the element have focus:
var hasFocus = $('foo').is(':focus');
// No jQuery:
elem === elem.ownerDocument.activeElement;
Which one should you use? どちらを使うべきですか.quoting the jQuery docs:jQueryドキュメントを参照:
As with other pseudo-class selectors (those that begin with a ":"), it is recommended to precede :focus with a tag name or some other selector; 他の擬似クラスセレクタ(":"で始まるもの)と同様に、タグ名または他のセレクタを使用してフォーカスすることをお勧めします.otherwise,the universal selector("*")is implied.そうでなければ、汎用セレクタ("*").In other words,the bare
$(':focus')
is equivalent to $('*:focus')
.言い換えれば、裸$(':focus')
は$('*:focus')
に相当する.If you are looking for the currently focused element,$(document.activeElement)will retrieve it without having to search the whole DOM tree.現在注目されている要素を探している場合は、$(document.activeElement)がDOMツリー全体を検索することなく取得します.The answer is:答えは:
document.activeElement
And if you want a jQuery object wrapping the element:パッケージ要素のjQueryオブジェクトがほしい場合:
$(document.activeElement)
#4階
Try this:これを試してみてください.
$(":focus").each(function() {
alert("Focused Elem_id = "+ this.id );
});
#5階
I've tested two ways in Firefox, Chrome, IE9 and Safari. Firefox,Chrome,IE 9,Safariで2つの方法をテストした.
(1). (1).
$(document.activeElement)
works as expected in Firefox,Chrome and Safari.$(document.activeElement)
は、Firefox,ChromeおよびSafariで予想通りに動作します.(2). (2).
$(':focus')
works as expected in Firefox and Safari.$(':focus')
は、FirefoxおよびSafariで所望の動作をする.I moved into the mouse to input 'name' and pressed Enter on keyboard, then I tried to get the focused element. マウスを動かして「name」と入力し、キーボードでEnterキーを押してフォーカス要素を取得しようとしました.
(1). (1).
$(document.activeElement)
returns the input:text:name as expected in Firefox,Chrome and Safari,but it returns input:submit:addPassword in IE 9 $(document.activeElement)
Firefox,ChromeおよびSafariで入力:text:nameを返すが、入力:IE 9でコミット:addPasswordを返す(2). (2).
$(':focus')
returns input:text:name as expected in Firefox and Safari,but nothing in IE $(':focus')
は入力を返します:text:FirefoxとSafariで予想される名前ですが、IEにはありません
#6階
How is it noone has mentioned.. どうして誰も言及しなかったの?
document.activeElement.id
I am using IE8, and have not tested it on any other browser. IE 8を使用していますが、他のブラウザではテストされていません.In my case, I am using it to make sure a field is a minimum of 4 characters and focused before acting. 私の場合、1つのフィールドの少なくとも4文字を確保し、演技する前に集中するために使用しています.Once you enter the 4th number, it triggers. 4番目の数字を入力するとトリガーされます.The field has an id of 'year'. このフィールドのIDは「年」です.I am using.. 私は使っています.
if( $('#year').val().length >= 4 && document.activeElement.id == "year" ) {
// action here
}