---
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">&lt;input type="text" id="myTextField" value="Text field."&gt;
&lt;p&gt;&lt;/p&gt;
&lt;button type="button" onclick="focusMethod()"&gt;点这里将焦点设置到文本框上！&lt;/button&gt;
</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>&lt;button type="button" id="myButton"&gt;Click Me!&lt;/button&gt;
&lt;p&gt;&lt;/p&gt;
&lt;button type="button" onclick="focusMethod()"&gt;点这里将焦点设置到按钮上！&lt;/button&gt;</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">&lt;button type="button" onclick="focusScrollMethod()"&gt;Click me to focus on the button!&lt;/button&gt;
&lt;button type="button" onclick="focusNoScrollMethod()"&gt;Click me to focus on the button without scrolling!&lt;/button&gt;

&lt;div id="container" style="height: 1000px; width: 1000px;"&gt;
&lt;button type="button" id="myButton" style="margin-top: 500px;"&gt;Click Me!&lt;/button&gt;
&lt;/div&gt;

</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>