HTMLElement.focus()

El método HTMLElement.focus() fija el foco del cursor en el elemento indicado, si éste puede ser enfocado.

Sintaxis

element.focus();
element.focus(focusOption); // Object parameter

Parámetros

focusOptions Optional

Es un objeto con la siguiente propiedad:

preventScroll Optional

Es un valor Boolean:

Si es false, el método hará scroll hasta que el elemento esté visible en la ventana del navegador
Si es true, el método NO hará scroll hasta que el elemento esté visible en la ventana del navegador.

Ejemplos

Enfocar un campo de texto

JavaScript

focusMethod = function getFocus() {
  document.getElementById("myTextField").focus();
}

HTML

<input type="text" id="myTextField" value="Campo de texto.">
<p></p>
<button type="button" onclick="focusMethod()">¡Púlsame para enfocar el campo de texto!</button>

Resultado

Enfocar un botón

JavaScript

focusMethod = function getFocus() {
  document.getElementById("myButton").focus();
}

HTML

<button type="button" id="myButton">Púlsame!</button>
<p></p>
<button type="button" onclick="focusMethod()">¡Púlsame para enfocar el botón!</button>

Resultado

Enfocar con focusOption

JavaScript

focusScrollMethod = function getFocus() {
  document.getElementById("myButton").focus({preventScroll:false});
}
focusNoScrollMethod = function getFocusWithoutScrolling() {
  document.getElementById("myButton").focus({preventScroll:true});
}

HTML

<button type="button" onclick="focusScrollMethod()">¡Púlsame para enfocar el botón!</button>
<button type="button" onclick="focusNoScrollMethod()">¡Púlsame para enfocar el botón sin hacer scroll!</button>

<div id="container" style="height: 1000px; width: 1000px;">
<button type="button" id="myButton" style="margin-top: 500px;">¡Púlsame!</button>
</div>

Resultado

Especificación

Especificación	Estado	Comentarios
HTML Living Standard La definición de 'focus' en esta especificación.	Living Standard
HTML 5.1 La definición de 'focus' en esta especificación.	Recommendation
HTML5 La definición de 'focus' en esta especificación.	Recommendation
Document Object Model (DOM) Level 2 HTML Specification La definición de 'focus' en esta especificación.	Obsolete
Document Object Model (DOM) Level 1 Specification La definición de 'focus' en esta especificación.	Obsolete

Si se llama a HTMLElement.focus() desde un gestor de eventos "mousedown" (ratón presionado), se debe también llamar al método event.preventDefault() para evitar que el foco abandone HTMLElement.

Compatibilidad en navegadores

BCD tables only load in the browser

Ver también

Método DOM HTMLElement.blur() (en-US) para quitar el foco sobre un elemento.
document.activeElement (en-US) para saber cuál es el elemento enfocado actualmente.