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.
- Si es
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 |
Notas
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.