index.html

---
title: HTMLElement.focus()
slug: Web/API/HTMLElement/focus
tags:
  - API
  - Focus
  - HTML DOM
  - HTMLElement
  - Method
  - Reference
  - Scroll
  - View
  - activate
browser-compat: api.HTMLElement.focus
---
<div>{{ APIRef("HTML DOM") }}</div>

<p>The <strong><code>HTMLElement.focus()</code></strong> method
		sets focus on the specified element, if it can be focused. The focused element is
		the element which will receive keyboard and similar events by default.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="brush: js"><em>element</em>.focus(<em>options</em>);</pre>

<h3 id="Parameters">Parameters</h3>

<dl>
	<dt><code>options</code> {{optional_inline}}</dt>
	<dd>
    <p>An optional object providing options to control aspects of the focusing process.
		This object may contain the following property:</p>
		<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="Examples">Examples</h2>

<h3 id="Focus_on_a_text_field">Focus on a text field</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;Click me to focus on the text field!&lt;/button&gt;
</pre>

<h4 id="Result">Result</h4>

<p>{{ EmbedLiveSample('Focus_on_a_text_field') }}</p>

<h3 id="Focus_on_a_button">Focus on a button</h3>

<h4 id="JavaScript_2">JavaScript</h4>

<pre class="brush: js">focusMethod = function getFocus() {
  document.getElementById("myButton").focus();
}
</pre>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html">&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;Click me to focus on the button!&lt;/button&gt;
</pre>

<h4 id="Result_2">Result</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="Result_3">Result</h4>

<p>{{ EmbedLiveSample('Focus_with_focusOption') }}</p>

<h2 id="Specifications">Specifications</h2>

{{Specifications}}

<h2 id="Notes">Notes</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>Behavior 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="Browser_compatibility">Browser compatibility</h2>

<p>{{Compat}}</p>

<h2 id="See_also">See also</h2>

<ul>
	<li>{{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>