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  

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Soporte básicoChrome Soporte completo 45Edge Soporte completo SiFirefox Soporte completo 5IE Soporte completo 9Opera Soporte completo 32Safari ? WebView Android Soporte completo 45Chrome Android Soporte completo 45Edge Mobile Soporte completo SiFirefox Android Soporte completo 5Opera Android Soporte completo 32Safari iOS ? Samsung Internet Android ?
preventScroll boolean optionChrome Soporte completo 64Edge ? Firefox ? IE ? Opera Soporte completo 51Safari ? WebView Android Soporte completo 64Chrome Android Soporte completo 64Edge Mobile ? Firefox Android ? Opera Android Soporte completo 51Safari iOS ? Samsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Compatibility unknown  
Compatibility unknown

Ver también

Etiquetas y colaboradores del documento

Colaboradores en esta página: mdnwebdocs-bot, AlePerez92, jesumv
Última actualización por: mdnwebdocs-bot,