HTML | Propiedad DOM accessKey

La propiedad DOM accessKey se utiliza para establecer o devolver el atributo accesskey de un elemento.

Sintaxis:

  • Para establecer la clave de acceso:
    HTMLElementObject.accessKey = value
    
  • Para devolver la clave de acceso:
    HTMLElementObject.accessKey
    

Valor :

  • carácter: carácter que se utiliza para especificar la tecla de método abreviado.

Valor de retorno: Esto devolverá el elemento seleccionado con la clave de acceso adjunta.

Ejemplo-1: Este ejemplo muestra cómo se adjunta una clave de acceso a un elemento seleccionado.

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML | DOM accessKey Property
    </title>
    <style>
        body {
            width: 90%;
            color: green;
            border: 2px solid green;
            height: 40%;
            font-weight: bold;
            text-align: center;
            padding: 30px;
            font-size: 20px;
        }
    </style>
</head>
  
<body>
  
    <a id="main" 
       href="https://www.geeksforgeeks.org">
      GeeksforGeeks
    </a>
    <br>
  
    <p>
        This example show how to attach 
        an accessKey to a selected element.
    </p>
  
    <script>
        document.getElementById("main").accessKey = "g";
    </script>
  
</body>
  
</html>

Producción :

Antes de hacer clic:

Después de hacer clic:

Ejemplo-2: Este ejemplo muestra cómo verificar qué clave de acceso está adjunta a un elemento seleccionado.

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML | DOM accessKey Property
    </title>
    <style>
        div {
            width: 80%;
            color: green;
            border: 2px solid green;
            height: 40%;
            font-weight: bold;
            text-align: center;
            padding: 30px;
            font-size: 20px;
        }
          
        #p1 {
            width: 130px;
            height: 20px;
            display: block;
            background-color: lightgrey;
            float: right;
            margin-top: -10px;
            padding: 5px;
        }
          
        #d {
            color: black;
        }
    </style>
</head>
  
<body>
    <div>
        <a id="main" accesskey="g" 
           href="https://www.geeksforgeeks.org">
          GeeksforGeeks
        </a>
  
        <p>
          Click the button to get the 
          accesskey of the link.
      </p>
        <p id="p1">Answer : <span id="d">
          </span>
        </p>
    </div>
    <br>
  
    <input type="button" onclick="myFunction()" 
           value="Click Me.!" />
  
    <script>
        function myFunction() {
            var gfg = 
                document.getElementById("main").accessKey;
            document.getElementById("d").innerHTML = gfg;
        }
    </script>
  
</body>
  
</html>

Producción:

Antes de hacer clic:

Después de hacer clic:

Nota: El acceso directo varía de un navegador a otro.

  • Mozilla Firefix: ALT + SHIFT + tecla de acceso
  • Google Chrome: ALT + tecla de acceso
  • Opera 15+: ALT + tecla de acceso
  • Safari: ALT + tecla de acceso
  • IE: ALT + tecla de acceso

Navegador compatible: los navegadores compatibles con DOM accessKey Property se enumeran a continuación.

  • Google Chrome
  • explorador de Internet
  • Firefox
  • Ópera
  • Safari

Publicación traducida automáticamente

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