0
206
ViewsVeo el cuarto carácter en la salida después de usar substr(0,3) en los caracteres de entrada
Tengo un problema con una entrada, estoy validando la longitud máxima con esta función, pero en mi html cada vez que ingreso más de 3 valores, se agrega a la salida de respuesta de entrada cuando solo debería mostrar un máximo de 3 valores, no estoy seguro por qué.
Y no, no puedo usar maxlength , porque necesito crear esto dinámicamente, a veces mi campo de entrada tiene texto de tipo y a veces cambia a un número aleatorio, no siempre 3.
Como puede ver en la imagen, escribí 333, luego ingresé la respuesta 333, agregué otros 3 que no veo en el campo de entrada y la respuesta cambió a 3333, lo cual no debería suceder.
Ejemplo:
const input = document.querySelector('input'); const log = document.getElementById('values'); input.addEventListener('input', updateValue); input.addEventListener('input', cutText); function cutText(e) { e.target.value = e.target.value.substr(0, 3); console.log(e.target.value) } function updateValue(e) { log.textContent = e.target.value; } <input placeholder="Enter some text" name="name"/> <p id="values"></p>1 answers
Answer question0
Esto se debe al orden del evento. Primero está actualizando el valor del elemento de log y luego configurando el valor de la entrada.
Si ha ingresado aaaa , primero establecerá el valor del elemento de log en aaaa y luego establecerá la entrada como aaa
Si colocara curText primero y luego updateValue , entonces se comportará como se esperaba
input.addEventListener('input', cutText); input.addEventListener('input', updateValue); const input = document.querySelector('input'); const log = document.getElementById('values'); input.addEventListener('input', cutText); input.addEventListener('input', updateValue); function cutText(e) { e.target.value = e.target.value.substr(0, 3); console.log(e.target.value) } function updateValue(e) { log.textContent = e.target.value; } <input placeholder="Enter some text" name="name" /> <p id="values"></p>1) Alternativamente, puede agregar un solo oyente y una función de llamada en él.
input.addEventListener( 'input', (e) => { cutText(e); updateValue(e); } )2 Puede hacerlo en una sola función de devolución de llamada
input.addEventListener( 'input', ( e ) => { const value = e.target.value.substr( 0, 3 ); e.target.value = value; log.textContent = value; } )