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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
|
---
title: HTMLElement.focus()
slug: Web/API/HTMLElement/focus
tags:
- API
- 参考
- 方法
- 焦点
translation_of: Web/API/HTMLOrForeignElement/focus
---
<div>{{ APIRef("HTML DOM") }}</div>
<p><span class="seoSummary"><strong><code>HTMLElement.focus()</code></strong> 方法用于设置焦点，如果被指定的元素可以获取到焦点，焦点就会被设置到该元素上。得到焦点的元素会作为键盘导航时的当前元素/基准元素，也会接收到相应的键盘事件等事件。</span></p>
<h2 id="语法">语法</h2>
<pre class="syntaxbox"><var>element</var>.focus(<var>options</var>); // Object parameter</pre>
<h3 id="参数">参数</h3>
<dl>
<dt><code>options</code> {{optional_inline}}</dt>
<dd>An optional object providing options to control aspects of the focusing process. This object may contain the following property:</dd>
<dd>
<dl>
<dt><code>preventScroll</code> {{optional_inline}}</dt>
<dd>A Boolean value indicating whether or not the browser should scroll the document to bring the newly-focused element into view. A value of <code>false</code> for <code>preventScroll</code> (the default) means that the browser will scroll the element into view after focusing it. If <code>preventScroll</code> is set to <code>true</code>, no scrolling will occur.</dd>
</dl>
</dd>
</dl>
<h2 id="示例">示例</h2>
<h3 id="将焦点设置到文本框上">将焦点设置到文本框上</h3>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush: js">focusMethod = function getFocus() {
document.getElementById("myTextField").focus();
}</pre>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><input type="text" id="myTextField" value="Text field.">
<p></p>
<button type="button" onclick="focusMethod()">点这里将焦点设置到文本框上！</button>
</pre>
<h4 id="结果">结果</h4>
<p>{{ EmbedLiveSample('Focus_on_a_text_field') }}</p>
<h3 id="将焦点设置到按钮上">将焦点设置到按钮上</h3>
<h4 id="JavaScript_2">JavaScript</h4>
<pre>focusMethod = function getFocus() {
document.getElementById("myButton").focus();
}</pre>
<h4 id="HTML_2">HTML</h4>
<pre><button type="button" id="myButton">Click Me!</button>
<p></p>
<button type="button" onclick="focusMethod()">点这里将焦点设置到按钮上！</button></pre>
<h4 id="结果_2">结果</h4>
<p>{{ EmbedLiveSample('Focus_on_a_button') }}</p>
<h3 id="Focus_with_focusOption">Focus with focusOption</h3>
<h4 id="JavaScript_3">JavaScript</h4>
<pre class="brush: js">focusScrollMethod = function getFocus() {
document.getElementById("myButton").focus({preventScroll:false});
}
focusNoScrollMethod = function getFocusWithoutScrolling() {
document.getElementById("myButton").focus({preventScroll:true});
}
</pre>
<h4 id="HTML_3">HTML</h4>
<pre class="brush: html"><button type="button" onclick="focusScrollMethod()">Click me to focus on the button!</button>
<button type="button" onclick="focusNoScrollMethod()">Click me to focus on the button without scrolling!</button>
<div id="container" style="height: 1000px; width: 1000px;">
<button type="button" id="myButton" style="margin-top: 500px;">Click Me!</button>
</div>
</pre>
<h4 id="结果_3">结果</h4>
<p>{{ EmbedLiveSample('Focus_prevent_scroll') }}</p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'editing.html#dom-focus', 'focus')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5.1', 'editing.html#focus()-0', 'focus')}}</td>
<td>{{Spec2('HTML5.1')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'editing.html#dom-focus', 'focus')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('DOM2 HTML', 'html.html#ID-32130014', 'focus')}}</td>
<td>{{Spec2('DOM2 HTML')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('DOM1', 'level-one-html.html#method-focus', 'focus')}}</td>
<td>{{Spec2('DOM1')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="备注">备注</h2>
<ul>
<li>If you call <code>HTMLElement.focus()</code> from a mousedown event handler, you must call <code>event.preventDefault()</code> to keep the focus from leaving the <code>HTMLElement</code></li>
<li>
<p>Behaviour of the focus in relation to different HTML features like {{HTMLAttrxRef("tabindex")}} or {{Glossary("shadow tree","shadow dom", 1)}}, which previously remained under-specified, were recently updated (as October of 2019). Checkout <a href="https://blog.whatwg.org/focusing-on-focus">WHATWG blog</a> for more info.</p>
</li>
</ul>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("api.HTMLElement.focus")}}</p>
<h2 id="参见">参见</h2>
<ul>
<li>DOM method {{domxref("HTMLElement.blur()")}} to remove the focus from an element.</li>
<li>{{ domxref("document.activeElement") }} to know which is the currently focused element.</li>
</ul>
|
