-
Notifications
You must be signed in to change notification settings - Fork 264
/
Copy pathfocus.xml
119 lines (116 loc) · 5.01 KB
/
focus.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<?xml version="1.0"?>
<entries>
<desc>Bind an event handler to the "focus" event, or trigger that event on an element.</desc>
<entry type="method" name="on" return="jQuery">
<title>focus event</title>
<desc>Bind an event handler to the "focus" event.</desc>
<signature>
<added>1.7</added>
<argument name=""focus"" type="string">
<desc>The string <code>"focus"</code>.</desc>
</argument>
<argument name="eventData" type="Anything" optional="true">
<desc>An object containing data that will be passed to the event handler.</desc>
</argument>
<argument name="handler" type="Function">
<desc>A function to execute each time the event is triggered.</desc>
<argument name="eventObject" type="Event" />
</argument>
</signature>
<longdesc>
<div class="warning">
<p>This page describes the <code>focus</code> event. For the deprecated <code>.focus()</code> method, see <a href="/focus-shorthand/"><code>.focus()</code></a>.</p>
</div>
<ul>
<li>The <code>focus</code> 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 (<code><input></code>, <code><select></code>, etc.) and links (<code><a href></code>). In recent browser versions, the event can be extended to include all element types by explicitly setting the element's <code>tabindex</code> property. An element can gain focus via keyboard commands, such as the Tab key, or by mouse clicks on the element.</li>
<li>Elements with focus are usually highlighted in some way by the browser, for example with a dotted line surrounding the element. The focus is used to determine which element is the first to receive keyboard-related events.</li>
</ul>
<div class="warning">
<p>Attempting to set focus to a hidden element causes an error in Internet Explorer. Take care to only use <code>.trigger( "focus" )</code> on elements that are visible. To run an element's focus event handlers without setting focus to the element, use <code>.triggerHandler( "focus" )</code> instead of <code>.trigger( "focus" )</code>.</p>
</div>
<p>For example, consider the HTML:</p>
<pre><code>
<form>
<input id="target" type="text" value="Field 1">
<input type="text" value="Field 2">
</form>
<div id="other">
Trigger the handler
</div>
</code></pre>
<p>The event handler can be bound to the first input field:</p>
<pre><code>
$( "#target" ).on( "focus", function() {
alert( "Handler for `focus` called." );
} );
</code></pre>
<p>Now clicking on the first field, or tabbing to it from another field, displays the alert:</p>
<p>
<samp>Handler for `focus` called.</samp>
</p>
<p>We can trigger the event when another element is clicked:</p>
<pre><code>
$( "#other" ).on( "click", function() {
$( "#target" ).trigger( "focus" );
} );
</code></pre>
<p>After this code executes, clicks on <samp>Trigger the handler</samp> will also alert the message.</p>
<p>The <code>focus</code> event does not bubble. As of version 1.4.2, jQuery works around this limitation by mapping <code>focus</code> to the <code>focusin</code> event in its event delegation methods.</p>
<p>The native <code>focus</code> event is asynchronous in all versions of IE, contrary to other browsers. To avoid issues related to this discrepancy, as of jQuery 3.7.0, jQuery uses <code>focusin</code> as the native backing event for <code>focus</code> in IE.</p>
</longdesc>
<example>
<desc>Fire focus.</desc>
<css><![CDATA[
span {
display: none;
}
]]></css>
<code><![CDATA[
$( "input" ).on( "focus", function() {
$( this ).next( "span" ).css( "display", "inline" ).fadeOut( 1000 );
} );
]]></code>
<html><![CDATA[
<p><input type="text"> <span>focus fire</span></p>
<p><input type="password"> <span>focus fire</span></p>
]]></html>
</example>
<example>
<desc>To stop people from writing in text input boxes, try:</desc>
<code><![CDATA[
$( "input[type=text]" ).on( "focus", function() {
$( this ).trigger( "blur" );
} );
]]></code>
</example>
<example>
<desc>To focus on a login input box with id 'login' on page startup, try:</desc>
<code><![CDATA[
$( function() {
$( "#login" ).trigger( "focus" );
} );
]]></code>
</example>
<category slug="events/form-events"/>
<category slug="forms"/>
<category slug="version/1.0"/>
<category slug="version/1.7"/>
<category slug="version/3.7"/>
</entry>
<entry type="method" name="trigger" return="jQuery">
<title>focus event</title>
<desc>Trigger the "focus" event on an element.</desc>
<signature>
<added>1.0</added>
<argument name=""focus"" type="string">
<desc>The string <code>"focus"</code>.</desc>
</argument>
</signature>
<longdesc>
<p>See the description for <a href="#on1"><code>.on( "focus", ... )</code></a>.</p>
</longdesc>
<category slug="events/form-events"/>
<category slug="forms"/>
<category slug="version/1.0"/>
</entry>
</entries>