¿El evento beforeinput proporciona una forma conveniente de obtener una vista previa del resultado de una modificación propuesta para que pueda bloquearse si es necesario con fines de validación?
No estoy buscando formas alternativas de hacer la validación de entrada; Ya estoy al tanto de los métodos que involucran la keypress de teclas y los eventos de input , así como la validación de HTML5, etc. En este momento, estoy investigando específicamente el evento beforeinput para ver qué ofrece.
Hasta ahora, esto es lo mejor que he encontrado:
document.getElementById("phone").addEventListener("beforeinput", function(e) { if(!/^(\d{0,7}|\d{3}-\d{0,4}|)$/.test(e.target.value + (e.data ?? ""))) { e.preventDefault(); } return; }); <input id="phone">El campo de texto en el fragmento anterior debe aceptar un número de teléfono simple de 7 dígitos con un guión opcional después del tercer dígito.
Observe que estoy agregando la propiedad de data del evento al valor actual de la entrada para crear una vista previa del valor modificado. Esto funciona bien si solo ingresa la entrada secuencialmente. Pero si, por ejemplo, escribe los 7 dígitos y luego retrocede justo después del tercero e intenta insertar el guión, no puede hacerlo, porque la validación asume que está al final donde estaría un guión. inválido. Surgen otros problemas si intenta reemplazar o eliminar una selección.
Se requerirá una vista previa precisa para resolver estos problemas. ¿Hay una manera simple de obtener uno del evento beforeinput ?
Tendría que obtener el inicio de selectionStart y el final de selectionEnd para averiguar cuántos caracteres se eliminaron/reemplazaron/etc., pero sí, bastante simple:
document.getElementById("phone").addEventListener("beforeinput", function(e) { const nextVal = e.target.value.substring(0, e.target.selectionStart) + (e.data ?? '') + e.target.value.substring(e.target.selectionEnd) ; console.log(nextVal) if(!/^(\d{0,7}|\d{3}-?\d{0,4}|)$/.test(nextVal)) { e.preventDefault(); } return; }); <input id="phone">