HTML | Propiedad de enfoque automático de color de entrada DOM

La propiedad de enfoque automático de color de entrada DOM en HTML DOM se usa para establecer o devolver si el selector de color debe enfocarse automáticamente o no cuando se carga la página . Esta propiedad se utiliza para reflejar el atributo de enfoque automático de HTML.

Sintaxis:

  • Devuelve la propiedad de enfoque automático.
    colorObject.autofocus
  • Se utiliza para establecer la propiedad de enfoque automático.
    colorObject.autofocus = true|false

Valores de propiedad:

  • verdadero: el selector de color obtiene el enfoque automático.
  • false: Tiene un valor por defecto. El selector de color no se enfoca.

Valores devueltos: devuelve un valor booleano que representa que el selector de color se enfoca o no cuando se carga la página.

Ejemplo-1: Este ejemplo ilustra cómo devolver la propiedad.

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML DOM Input Color autofocus Property
    </title>
</head>
  
<body style="text-align:center;">
    <h1>
        GeeksForGeeks
    </h1>
    <h2> 
        HTML DOM Input Color autofocus Property 
    </h2>
  
    <form id="myGeeks">
        <label>
            Select your favorite color:
        </label>
        <input type="color"
               value="#009900"
               name="Geek_color"
               id="color" 
               autofocus>
    </form>
  
    <button onclick="myGeeks()">
        Click Here!
    </button>
  
    <p id="GFG" 
       style="color:green;
              font-size:24px;">
    </p>
  
    <script>
        function myGeeks() {
            var x =
                document.getElementById(
                    "color").autofocus;
  
            document.getElementById(
                "GFG").innerHTML = x;
        }
    </script>
</body>
  
</html>

Salida:
antes de hacer clic en el botón:

Después de hacer clic en el botón:

Ejemplo-2: Este ejemplo ilustra cómo establecer la propiedad.

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML DOM Input Color autofocus Property
    </title>
</head>
  
<body style="text-align:center;">
    <h1>
        GeeksForGeeks
    </h1>
    <h2> 
        HTML DOM Input Color autofocus Property 
    </h2>
  
    <form id="myGeeks">
        <label>
          Select your favorite color:
      </label>
        <input type="color" 
               value="#009900"
               name="Geek_color"
               id="color"
               autofocus>
    </form>
  
    <button onclick="myGeeks()">
        Click Here!
    </button>
  
    <p id="GFG"
       style="color:green;
              font-size:24px;">
  </p>
  
    <script>
        function myGeeks() {
            var x = 
                document.getElementById(
                  "color").autofocus = false;
            
            document.getElementById(
              "GFG").innerHTML = x;
        }
    </script>
</body>
  
</html>

Producción :

Antes de hacer clic en el botón:

Después de hacer clic en el botón:

Navegadores compatibles: los navegadores compatibles con la propiedad de enfoque automático de color de entrada DOM se enumeran a continuación:

  • Google Chrome
  • Internet Explorer 10.0 +
  • Firefox
  • Ópera
  • Safari

Publicación traducida automáticamente

Artículo escrito por ManasChhabra2 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 *