Evento onfocus

Eventos DOM FocusEvent

Definición y uso

El evento onfocus ocurre cuando un elemento obtiene el foco.

El evento onfocus se utiliza más a menudo con <input>, <select> y <a>.

Consejo: El evento onfocus se utiliza con Evento onblurpor el contrario.

Consejo: El evento onfocus es similar a Evento onfocusin. La principal diferencia radica en que el evento onfocus no se propaga. Por lo tanto, si desea determinar si un elemento o uno de sus subelementos ha obtenido el foco, puede usar el evento onfocusin. Pero, puede usar el evento onfocus Método addEventListener()de useCapture para lograr esto.

Ejemplo

Ejemplo 1

Ejecute JavaScript cuando el campo de entrada obtenga el foco:

<input type="text" onfocus="myFunction()">

Prueba por ti mismo

Más ejemplos TIY en la parte inferior de la página.

Sintaxis

En HTML:

<elemento onfocus="myScript">

Prueba por ti mismo

En JavaScript:

objeto.onfocus = function(){myScript};

Prueba por ti mismo

En JavaScript, utilice el método addEventListener():

objeto.addEventListener("focus", myScript);

Prueba por ti mismo

Nota:Internet Explorer 8 o versiones anteriores no lo soportan Método addEventListener()。

Detalles técnicos

Burbujeante: No soportado
Cancelable: No soportado
Tipo de evento: FocusEvent
Etiquetas HTML soportadas: Todos los elementos HTML, excepto: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> y <title>.
Versión de DOM: Eventos de Nivel 2

Compatibilidad de navegador

Eventos Chrome IE Firefox Safari Opera
onfocus Soporte Soporte Soporte Soporte Soporte

Más ejemplos

Ejemplo 2

Uso conjunto de eventos onfocus y onblur:

<input type="text" onfocus="focusFunction()" onblur="blurFunction()">

Prueba por ti mismo

Ejemplo 3

Limpiar el campo de entrada con foco:

Comentarios: al obtener el foco el campo de entrada actual se reemplaza con una cadena vacía.
<input type="text" onfocus="this.value=''" value="Blabla">

Prueba por ti mismo

Ejemplo 4

Delegación de eventos: establecer el parámetro useCapture de addEventListener en true:

<form id="myForm">
  <input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focus", myFocusFunction, true);
x.addEventListener("blur", myBlurFunction, true);
function myFocusFunction() {
  document.getElementById("myInput").style.backgroundColor = "yellow"; 
}
function myBlurFunction() {
  document.getElementById("myInput").style.backgroundColor = ""; 
}
</script>

Prueba por ti mismo

Ejemplo 5

Delegación de eventos: uso del evento focusin (no soportado por Firefox):

<form id="myForm">
  <input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focusin", myFocusFunction);
x.addEventListener("focusout", myBlurFunction);
function myFocusFunction() {
  document.getElementById("myInput").style.backgroundColor = "yellow"; 
}
function myBlurFunction() {
  document.getElementById("myInput").style.backgroundColor = ""; 
}
</script>

Prueba por ti mismo

Eventos DOM FocusEvent