.focus()S2C Home « Events « .focus()
Focus event handler.
Description
The .focus()
method is used to bind an event handler to the JavaScript focus
event or trigger that event on the specified element.
- The
focus
event is sent to an element when the element gains focus. - Do not use the
.focus()
method on hidden elements as this can cause problems in some browsers. - The
focus
event is useful for input, link and select type HTML elements although this functionality can be extended to any element type via use of the element'stabindex
property. - Browser vendors usually highlight the element in focus with a dotted border.
- Use the the
.triggerHandler()
method instead of the.focus()
method when you want to run an element's focus event handlers without setting focus on the element.
Syntax
Signature | Description |
---|---|
.focus( ) | Trigger the focus JavaScript event on the specified element. |
.focus( [eventData], handler(eventObject) ) | Bind an event handler to the focus JavaScript event, optionally passing an object of data. |
Parameters
Parameter | Description | Type |
---|---|---|
eventData | An object of data to pass to the event handler. | Object |
handler( eventObject ) | A function to execute each time the event is triggered. | Function |
Return
A jQuery
object.
.focus( )
Example
Top
Trigger the focus
JavaScript event on the specified element.
- This signature is a shortcut for
.trigger('focus')
.
In the example below we show a new message in the 'div' element with an id of 'div1' every time the radio button for 'chicken pie' gets focus.
When the radio button is pushed we trigger off the focus
JavaScript event on the 'div1'. This then fires off the $('#div1').focus(function(){})
code which outputs the message.
div1. Some initial text.
$(function(){
$('#chicken').focus(function () {
$('#div1').append('<code>focus</code> JavaScript event triggered<br />');
});
$('#chicken').click(function() {
$('#div1').focus();
});
});
.focus( [eventData], handler(eventObject) )
Example
Top
- This signature is a shortcut for
.bind('focus', handler)
.
Bind an event handler to the focus
JavaScript event, optionally passing a map of data.
In the example below we show a new message in the 'p' element with an id of 'scrollspan1' each time the input element with an id of 'input1' below gains focus.
When the input field gets focus, the focus
JavaScript event fires off the $('#input1').focus({ param1: '#scrollspan1', param2: 'focus', param3: '**JavaScript event triggered** ' }, addText2);
code.
What we are doing here is passing across the event
object to the function addText2(event)
. The map we specify, in our case { param1: '#scrollspan1', param2: 'focus', param3: '**JavaScript event triggered** ' }
gets tagged onto the event.data
property. We then access this parameter in the function via event.data.param
and use it as part of the appended data.
$(function(){
$('#input1').focus({ param1: '#scrollspan1', param2: 'focus ',
param3: '**JavaScript event triggered** ' }, addText2);
function addText2(event) {
$(event.data.param1).append(event.data.param2 + ''<code>' + event.data.param3+ ''</code>');
}
});
We will show a message here.