Estoy tratando de insertar un guión cuando el tamaño de entrada es exactamente dos. Aquí está mi código
document.getElementById('numberInput').onkeypress = function() { if (this.value.length == 2) { this.value = this.value + '-'; } } <input type="text" id="numberInput">Pero el problema es que - no aparece hasta que se ingresa el tercer carácter. Aunque el guión está colocado correctamente, quiero decir después de dos caracteres.
¿Cómo puedo obtener un guión justo después de ingresar dos caracteres?
Intenté onkeyup pero el problema es que también se dispara cuando presiono el botón de retroceso. Cuando hay dos caracteres, aparece el guión, pero en ese momento, si presiono la tecla de retroceso y elimino el guión, vuelve inmediatamente. Así que elijo onkeypress
el valor del cuadro de texto de entrada, durante onKeyPress es siempre el valor antes del cambio. Esto permite que el detector de eventos cancele la pulsación de tecla.
Para obtener el valor después de que se haya actualizado el valor del campo, programe una función para que se ejecute en el siguiente bucle de eventos. La forma habitual de hacer esto es llamar a setTimeout con un tiempo de espera de 0:
document.getElementById('numberInput').onkeypress = function() { // arrow function keeps scope setTimeout(() => { // now it is the value after the keypress if (this.value.length == 2) { this.value = this.value + '-'; } }, 0); } <input type="text" id="numberInput">¿Por qué no engancharse al evento de entrada en su lugar?
document.getElementById("numberInput") .addEventListener("input", function(e) { if (e.target.length === 2) { e.target.value += "-"; } });Esto está sucediendo debido al bucle de eventos. this.value se actualiza solo después de presionar una tecla. Entonces, en este caso, siempre terminas con el estado antiguo. Recomendaría usar otro método de escucha, en este caso oninput . Y recuperar el último valor de entrada a través de los parámetros de la función
En su caso, la solución sería:
document.getElementById('numberInput').oninput = function (event) { if (event.target.value.length === 2) { this.value = event.target.value + '-' } }