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