Tengo una tarjeta de arranque que contiene información de una API. En mi archivo JS, renderizo dinámicamente la tarjeta en mi archivo HTML. En este momento estoy tratando de hacer que un ícono sea accesible al hacer que se pueda hacer clic con la enter key pero no puedo hacer que funcione.
Intenté envolver la etiqueta i en un botón pero no funcionó. También intenté envolverlo en a etiqueta y agregar un href , pero tampoco funcionó. ¿Alguien tiene alguna idea o sabe qué hacer?
En el código a continuación, verá que agregué el atributo tabindex=0 que al menos permite al usuario seleccionar la etiqueta i pero no ayuda a que se pueda hacer clic con la tecla enter .
<i id="heartBTN-${data.date}" class="fas fa-heart hidden heart fa-lg p-1 my-1 mr-3" tabindex="0" aria-label="like content" title="I like it" ><span class="likeSpan likeSpan${data.date}">Like Me</span></i >Puede hacer algo como esto, pero como el selector de consultas es body , se activará el disparador cada vez que alguien presione la tecla Intro en la página.
document.querySelector('body').addEventListener('keypress', function (e) { if (e.key === 'Enter') { // triggering the click $('.fa-heart').click(); } }); La forma recomendada es vincular el detector de eventos a un campo de entrada. Como document.querySelector('#myInputField').addEventListener