0
227
ViewsPrevenir el valor predeterminado en seleccionar enfocado
Estoy tratando de evitar el valor predeterminado al presionar F1 para que no abra una nueva pestaña en support.google.com, en su lugar, quiero usarlo como una tecla de acceso rápido para mi aplicación, esto funciona en todas partes, excepto cuando enfoco un elemento seleccionado por alguna razón. Pongo un ejemplo:
<!DOCTYPE html> <html lang="en"> <body> <input type="text"> <select onkeydown="" name="" id=""> <option value="a">a</option> </select> </body> </html> <script> window.addEventListener('keydown', (e) => { e.preventDefault() }) document.getElementsByTagName('select')[0].addEventListener('keydown', (e) => { e.preventDefault() }) document.getElementsByTagName('option')[0].addEventListener('keydown', (e) => { e.preventDefault() }) </script>Aquí, si presiona F1, no hará nada, si se enfoca en la entrada y presiona F1 tampoco hará nada, pero si abre el menú desplegable de selección y presiona F1, se abrirá la pestaña de ayuda. Ese es el problema. ¿Algúna idea de cómo arreglar esto?
EDITAR: Entonces parece ser un error de Windows/Chrome, en Mozilla este mismo código funciona como se esperaba. El evento de prevención en la selección y la opción no son necesarios, pero los pongo por si acaso.
1 answers
Answer question0
Debe adjuntar el controlador de eventos en el documento en lugar de la window o un elemento en particular:
document.addEventListener("keydown", function(e) { if (e.key === "F1") { e.preventDefault(); console.log("F1 Pressed!"); }; }, false); <select name="" id=""> <option value="a">a</option> </select> Además, su código anula onkeydown en la etiqueta <select> . Amablemente quite eso también.
En la vista previa anterior, independientemente de si se enfoca en la etiqueta <select> o no, F1 está siendo controlado por JavaScript.
Vista previa aquí:
