Description: Bind an event handler to the "focus" JavaScript event, or trigger that event on an element.
handler(eventObject)A function to execute each time the event is triggered.
.bind('focus', handler)
in the first variation, and .trigger('focus')
in the second.focus
event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as form elements (<input>
, <select>
, etc.) and links (<a href>
). In recent browser versions, the event can be extended to include all element types by explicitly setting the element's tabindex
property. An element can gain focus via keyboard commands, such as the Tab key, or by mouse clicks on the element.For example, consider the HTML:
<form> <input id="target" type="text" value="Field 1" /> <input type="text" value="Field 2" /> </form> <div id="other"> Trigger the handler </div>
The event handler can be bound to the first input field:
$('#target').focus(function() { alert('Handler for .focus() called.'); });
Now if we click on the first field, or tab to it from another field, the alert is displayed:
Handler for .focus() called.
We can trigger the event when another element is clicked:
$('#other').click(function() { $('#target').focus(); });
After this code executes, clicks on Trigger the handler will also alert the message.
The focus
event does not bubble in Internet Explorer. Therefore, scripts that rely on event delegation with the focus
event will not work consistently across browsers.
Triggering the focus on hidden elements causes an error in Internet Explorer. Take care to only call
.focus()
without parameters on elements that are visible.
<!DOCTYPE html>
<html>
<head>
<style>span {display:none;}</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p><input type="text" /> <span>focus fire</span></p>
<p><input type="password" /> <span>focus fire</span></p>
<script>
$("input").focus(function () {
$(this).next("span").css('display','inline').fadeOut(1000);
});
</script>
</body>
</html>
$("input[type=text]").focus(function(){
$(this).blur();
});
$(document).ready(function(){
$("#login").focus();
});