Pulsar la barra espaciadora en el elemento ancla html no activa el evento clic. ¿Cómo dejar que esto suceda?

Question

<a tabindex="7" style="cursor: pointer;" class="button" id="saveTocAddNew" onClick="saveTdsAddNew();"/><span>Save & Add Another</span></a> 

Tengo el elemento de anclaje anterior en mi página. Este estilo tiene el aspecto de un botón, por lo que se tratará como un botón. El problema es el siguiente. El usuario no desea usar el mouse para hacer clic o alcanzarlo, pero usará la tabulación para resaltar este elemento de anclaje y luego usará las teclas "barra espaciadora" o "retorno" para hacer clic en él. Si el usuario acierta en la barra espaciadora o devuelve la clave, debería poder llamar a una función de JavaScript. Probé el evento onkeypress y eso no ayuda. ¿Alguna idea?

Answer 1

Primero: hay un problema con el código HTML. Está utilizando la sintaxis corta para A, lo que significa que el texto no forma parte del contenido A. A muchos navegadores no les gusta la sintaxis corta para las etiquetas A de todos modos, no es su culpa, pero nuestro trabajo es ser más tolerantes que los navegadores.

Aquí está la versión corregida:

<a tabindex="7" style="cursor: pointer;" class="button" id="saveTocAddNew" onClick="saveTdsAddNew();"><span>Save & Add Another</span></a> 

Dependiendo del navegador y DOCTYPE, es significativo si el nombre del evento es en minúsculas o no. Solo algo para buscar.

Por último, de forma predeterminada, su evento onclick solo se activará para los clics y Enter - no para la barra espaciadora. Muchos navegadores tratan la barra espaciadora como una cosa de paginación. Si está seguro de que desea capturar eventos de la barra espaciadora en este A y tratarlos como Intro, tendrá que definir un evento de pulsación de tecla que busque barras espaciales. De este modo:

function addNewKeys(event) { 
    if(!event) var event = window.event; // cross-browser shenanigans 
    if(event.keyCode === 32) { // this is the spacebar 
     saveTdsAddNew(event); 
    } 
    return true; // treat all other keys normally; 
} 

(Recuerde que debe obligar a esta nueva función a la onkeypress de ese A.)

Nota que estoy pasando el event a la función saveTdsAddNew. Eso es porque creo que los manejadores de eventos normalmente reciben el objeto event como argumento, por lo que preserva el patrón existente. Desde event, puede recuperar el elemento al que se hizo clic/ingresar, etc.

Answer 2

No he intentado hacer esto personalmente, pero apuesto a que es un poco más complicado que simplemente configurar un evento de pulsación de tecla en el hipervínculo.

Imagino que lo que debe hacer es manejar la tecla presionada a nivel del documento, dentro de esa comprobación para ver si su hipervínculo está enfocado, luego ejecute el código que desee.

También vale la pena separar el evento de clic del HTML.