Estaba armando un javascript simple para evitar que se ingresen caracteres en mi formulario. Llegué a esta etapa en la que pude evitar todo tipeo y noté que evita todos los caracteres excepto los especiales, como å ´ ˆ
que puedo ingresar en mi mac usando: [Opción]+`+[Tecla de letra]
¿Cómo puedo evitar que se introduzcan?
HTML:
<form> <input name="myinput"></input> </form>JS:
document.querySelector('input').addEventListener('keypress', function (e) { e.preventDefault(); return false; });violín: https://jsfiddle.net/6qty7dgr/
Esto no funciona porque estas pulsaciones de teclas en realidad inician un evento de composición , es decir, el IME aún no ha procesado la entrada completa y tiene "medio carácter". Por lo tanto, llamar a preventDefault() en el evento keydown aquí no evitará que se escriba este medio carácter y el navegador lo insertará en la entrada de todos modos.
document.querySelector('input').addEventListener('keypress', function (e) { e.preventDefault(); }); document.querySelector('input').addEventListener('compositionstart', function (e) { console.log("composition start fired"); e.preventDefault(); // should have worked per specs, but doesn't... }); <input name="myinput"></input> Según las especificaciones, debería haber podido evitar esto llamando a preventDefault() en el evento de inicio de compositionstart que se activa. Sin embargo, ningún navegador parece admitir la cancelación de este evento y parece que, por razones técnicas , nunca lo admitirán. Sin embargo, deberían admitir la cancelación del evento beforeinput , pero a partir de hoy solo Safari admite la cancelación cuando se trata de un evento de composición...
"Estaba armando un javascript simple para evitar que se ingresen caracteres en mi formulario ".
"¿Cómo puedo evitar que estos sean ingresados?"
Énfasis añadido por mí
Evite eventos de teclado si está utilizando un control de formulario. Los eventos de formulario generalmente funcionan mejor ya que hay muy poca variación al interpretar el valor de una entrada en comparación con los eventos de teclado.
En el siguiente ejemplo, <input> escucha el evento "input". A medida que el usuario escribe en <input> , la siguiente expresión regular filtra la propiedad .value :
const rgx = new RegExp(/([å´ˆø`¨])*/, 'g');( ... ) - Grupo de captura: caracteres coincidentes que se extraen.* ----- Cuantificador: cero o más coincidencias.[ ... ] - Clase: un carácter literal. - , \ , ] , y ^ deben escaparse anteponiéndoles \ . å´ˆø``¨ se reemplazan instantáneamente con un espacio cero "" .
Los detalles se comentan en el ejemplo a continuación.
// Bind input tag to the input event document.forms[0].elements.filter.oninput = dataFilter; // Pass the Event Object function dataFilter(e) { // Delegate to input tag only if (this.name == 'filter') { /* This matches å´ˆø`¨ */ const rgx = new RegExp(/([å´ˆø`¨])*/, 'g'); // Replace everything in rgx const filtered = this.value.replace(rgx, ''); // Assign filtered string as value this.value = filtered; } // Prevent input from rendering everything e.preventDefault(); }; <form> <input name='filter'> </form>Nota: El evento onkeypress no se activa para todas las teclas (por ejemplo, ALT, CTRL, SHIFT, ESC) en todos los navegadores. Para detectar solo si el usuario ha presionado una tecla, use el evento onkeydown en su lugar, porque funciona para todas las teclas.