HTML | Evento DOM onfocus – Part 2

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *