El evento HTML DOM onfocus ocurre cuando un elemento recibe el foco. El evento onfocus se usa principalmente con <input> , <select> y <a> . El evento onfocus es lo opuesto al evento onblur.
El evento HTML DOM onfocus admite todas las etiquetas HTML EXCEPTO:
- <base>
- <bdo>
- <br>
- <cabeza>
- <html>
- <iframe>
- <meta>
- <parámetro>
- <script>
- <estilo>
- <título>
Sintaxis:
- En HTML:
<element onfocus="myScript">
- En JavaScript:
object.onfocus = function(){myScript};
- En JavaScript, usando el método addEventListener():
object.addEventListener("focus", myScript);
Nota: El evento onfocus es diferente del evento onfocusin , porque el evento onfocus no burbujea.
Ejemplo 1:
<!DOCTYPE html> <html> <head> <title> HTML DOM onfocus Event </title> </head> <body> <center> <h1 style="color:green"> GeeksforGeeks </h1> <h2> HTML DOM onfocus Event </h2> <br> Name: <input type="text" onfocus="geekfun(this)"> <script> function geekfun(gfg) { gfg.style.background = "green"; } </script> </center> </body> </html>
Producción:
Ejemplo 2:
<!DOCTYPE html> <html> <head> <title> HTML DOM onfocus Event </title> </head> <body> <center> <h1 style="color:green"> GeeksforGeeks </h1> <h2>HTML DOM onfocus Event</h2> <br> Name: <input type="text" id="fname"> <script> document.getElementById( "fname").onfocus = function() { geekfun() }; function geekfun() { document.getElementById( "fname").style.backgroundColor = "green"; } </script> </center> </body> </html>
Producción
Ejemplo 3:
<!DOCTYPE html> <html> <head> <title> HTML DOM onfocus Event </title> </head> <body> <center> <h1 style="color:green"> GeeksforGeeks </h1> <h2>HTML DOM onfocus Event</h2> <br> Name: <input type="text" id="fname"> <script> document.getElementById( "fname").addEventListener( "focus", Geeksfun); function Geeksfun() { document.getElementById( "fname").style.backgroundColor = "green"; } </script> </center> </body> </html>
Producción:
Navegadores compatibles: los navegadores compatibles con HTML DOM onfocus Event se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Firefox
- safari de manzana
- Ópera
Publicación traducida automáticamente
Artículo escrito por Vijay Sirra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA