Tengo este código javascript:
document.querySelector('div[data-field-name="CNPJ"] input').addEventListener('keydown', (inheritance) => { let value = inheritance.target.value; console.log(value.length) if (value.length >= 18) { inheritance.preventDefault() inheritance.stopPropagation() return } value = value.replace(/\D/g, "") value = value.replace(/^(\d{2})(\d)/, "$1.$2") value = value.replace(/^(\d{2}).(\d{3})(\d)/, "$1.$2.$3") value = value.replace(/.(\d{3})(\d)/, ".$1/$2") value = value.replace(/(\d{4})(\d)/, "$1-$2") inheritance.target.value = value; })El problema que tengo es que cuando el valor de entrada alcanza la longitud máxima (lo estipulé en el código), no puedo eliminar el texto.
No sé qué está causando este problema.
Está impidiendo el comportamiento de entrada predeterminado en esta línea cuando alcanza la longitud máxima. Elimínelo y agregue una verificación de longitud máxima en el código HTML en su lugar.
if (value.length >= 18) { inheritance.preventDefault() inheritance.stopPropagation() return }No estoy seguro de por qué se requiere esta línea, ya que puede hacer algo similar en HTML:
<input maxlength="18"></input>¿Puede explicar por qué maxlength debe hacerse en JavaScript?
Alternativamente, puede agregar un Retroceso o comprobaciones de teclas similares en su lógica:
if ( value.length >= 18 && inheritance.key !== "Backspace" ) { inheritance.preventDefault() inheritance.stopPropagation() return }No recomiendo detectar claves específicas personalmente, ya que HTML considera muchos más casos extremos que una verificación de clave única.
Consulte el documento de MDN sobre el patrón de entrada .
No hay forma de que la implementación anterior cause inheritance.preventDefault() hace que la función no produzca una entrada cuando la longitud es mayor o igual a 18
La mejor manera es eliminar esa if statement luego agregar maxlength="18" al elemento de entrada.
Ver la demostración:
Eso fue debido a la declaración if
document.querySelector('div[data-field-name="CNPJ"] input').addEventListener('keydown', (e) => { let value = e.target.value; value = value.replace(/\D/g, "") value = value.replace(/^(\d{2})(\d)/, "$1.$2") value = value.replace(/^(\d{2}).(\d{3})(\d)/, "$1.$2.$3") value = value.replace(/.(\d{3})(\d)/, ".$1/$2") value = value.replace(/(\d{4})(\d)/, "$1-$2") e.target.value = value; }) <div data-field-name="CNPJ"> <input type="text" maxlength="18" /> </div>