Using jQuery, how can I get the input element that has the caret's (cursor's) focus?
Or in other words, how to determine if an input has the caret's focus?
This question is related to
javascript
jquery
cursor
element
caret
// 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:
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'). If you are looking for the currently focused element, $( document.activeElement ) will retrieve it without having to search the whole DOM tree.
The answer is:
document.activeElement
And if you want a jQuery object wrapping the element:
$(document.activeElement)
$(':focus')[0] will give you the actual element.
$(':focus') will give you an array of elements, usually only one element is focused at a time so this is only better if you somehow have multiple elements focused.
$( document.activeElement )
Will retrieve it without having to search the whole DOM tree as recommended on the jQuery documentation
Try this::
$(document).on("click",function(){
alert(event.target);
});
How is it noone has mentioned..
document.activeElement.id
I am using IE8, and have not tested it on any other browser. In my case, I am using it to make sure a field is a minimum of 4 characters and focused before acting. Once you enter the 4th number, it triggers. The field has an id of 'year'. I am using..
if( $('#year').val().length >= 4 && document.activeElement.id == "year" ) {
// action here
}
If you want to confirm if focus is with an element then
if ($('#inputId').is(':focus')) {
//your code
}
I've tested two ways in Firefox, Chrome, IE9 and Safari.
(1). $(document.activeElement) works as expected in Firefox, Chrome and Safari.
(2). $(':focus') works as expected in Firefox and Safari.
I moved into the mouse to input 'name' and pressed Enter on keyboard, then I tried to get the focused element.
(1). $(document.activeElement) returns the input:text:name as expected in Firefox, Chrome and Safari, but it returns input:submit:addPassword in IE9
(2). $(':focus') returns input:text:name as expected in Firefox and Safari, but nothing in IE
<form action="">
<div id="block-1" class="border">
<h4>block-1</h4>
<input type="text" value="enter name here" name="name"/>
<input type="button" value="Add name" name="addName"/>
</div>
<div id="block-2" class="border">
<h4>block-2</h4>
<input type="text" value="enter password here" name="password"/>
<input type="submit" value="Add password" name="addPassword"/>
</div>
</form>
Try this:
$(":focus").each(function() {
alert("Focused Elem_id = "+ this.id );
});
Source: Stackoverflow.com