tengo este problema que resolver
En este formulario, un usuario escribe un valor. (En realidad, un escáner escanea un número y lo escribe virtualmente, sin enviar teclas adicionales como Enter)
Necesito verificar constantemente, mientras se escribe , si el valor en el cuadro de entrada es un número de 8 dígitos (comenzando con "4") y, si lo es, activar la acción de envío.
Intenté registrar cualquier cambio. Pero el siguiente código solo registra los cambios después de que dejo el cuadro de entrada.
<form action="#" onsubmit="return validateFormOnSubmit(this);"> <input name="boarding_id" value="" width="600px" onChange="console.log(this.value);"> <button type="submit" name="action" class="btn btn-primary" value="0">Scan</button> </form>¿Hay una forma de Javascript para pasar el valor del cuadro a una función cada vez que se escribe una sola letra?
Nota: Si bien el formulario muestra un botón "escanear", el objetivo es hacer clic automáticamente en ese botón tan pronto como se hayan ingresado 8 dígitos y una función de validación los haya declarado válidos.
Por lo general , no es una buena idea usar controladores de eventos en línea.
En realidad, un escáner escanea un número y lo escribe virtualmente.
Entonces, según tengo entendido, desea mostrar el resultado de alguna función de escaneo que ingresa valores y verifica el valor de entrada. Parece que no hay realmente una necesidad de un controlador de cambios . Aquí hay un ejemplo reproducible mínimo para una función de escaneo ficticio. Utiliza la delegación de eventos para manejar el clic del botón.
document.addEventListener(`click`, handle); function scan(i = 0) { const inp = document.querySelector(`[name='boarding_id']`); const showIt = document.querySelector(`#showIt`); if (i < 1) { inp.value = 4; i += 1; } else { const nr = 1 + Math.floor(Math.random() * 9); const currentValue = inp.value; inp.value += nr; } if (i < 8) { showIt.textContent = `Scanning ...`; return setTimeout( () => scan(i + 1), 100) } showIt.textContent = `Done!`; document.querySelector(`#scan`).removeAttribute(`disabled`); } function handle(evt) { if (evt.target.id === `scan`) { evt.target.setAttribute(`disabled`, `disabled`); return scan(); } } <input name="boarding_id" value="" width="600px" readonly> <span id="showIt"></span> <p><button id="scan">Scan</button></p>const input = document.querySelector('input'); const demo_variable = document.getElementById('demo_variable'); input.addEventListener('input', updateValue); function updateValue(e) { demo_variable.textContent = e.target.value; }<form action="#" onsubmit="return validateFormOnSubmit(this);"> <input name="boarding_id" value="" width="600px" > <button type="submit" name="action" class="btn btn-primary" value="0">Scan</button> <p id="demo_variable"></p> </form>
Puede usar el evento de input , que también se activa cuando la edición se realiza sin el teclado (arrastrar/soltar con el mouse, menú contextual, otro dispositivo...).
Use una expresión regular para hacer la verificación. Puede acceder al form a través de la propiedad de form del elemento de input :
<input name="boarding_id" oninput="/^4\d{7}$/.test(this.value) && this.form.submit()"> Sin embargo, es una mejor práctica vincular eventos no con atributos HTML, sino con código JS. Para ese propósito, asigne al elemento de form un atributo de id (como id="frm" ), y luego:
const form = document.getElementById("frm"); form.boarding_id.addEventListener("input", (e) => /^4\d{7}$/.test(e.target.value) && form.submit());