我有这个问题要解决
在这种形式中，用户键入一个值。(实际上，扫描仪扫描一个数字并虚拟地键入它——而不需要发送额外的密钥(如Enter(
我需要在进行输入的同时继续检查--输入中的值是否框是一个8位数字(以"4"开头(即，启动提交操作。
我试图记录任何更改。但是下面的代码只记录在我离开输入框后的更改。
<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>
有没有一种Javascript方法可以在键入单个字母时将框的值传递给函数？
注意：当表单显示"；扫描"；按钮，目标是在输入8位数字并由验证器函数声明有效后立即自动单击该按钮。
使用内联事件处理程序通常不是一个好主意。
实际上，扫描仪扫描一个数字并虚拟地将其键入
因此，据我所知，您希望显示一些输入值并检查输入值的扫描函数的结果。看起来并没有真正需要更改处理程序。下面是一个伪扫描函数的最小可复制示例。它使用事件委派来处理按钮单击。
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>
您可以使用input事件，当在没有键盘的情况下进行编辑时(鼠标拖放、上下文菜单、其他设备…(，该事件也会触发。
使用正则表达式进行验证。您可以通过input元素的form属性访问form：
<input name="boarding_id" oninput="/^4d{7}$/.test(this.value) && this.form.submit()">
然而，更好的做法是不使用HTML属性绑定事件，而是使用JS代码绑定事件。为此，给form元素一个id属性(如id="frm"(，然后：
const form = document.getElementById("frm");
form.boarding_id.addEventListener("input", (e) => /^4d{7}$/.test(e.target.value) && form.submit());
您可以通过多种方式实现这一点。我在下面展示了一个
function myFunction() {
const userInput = document.getElementById("numberinput").value;
document.getElementById("displaynumber").innerHTML = "You typed: " + userInput;
}
function submtValue(value) {
const submitValue =document.getElementById("numberinput").value;
if(submitValue.length === 8) {
// do your validation
alert("Bingo..!!")
}
else {
alert("Minimum length required is 8")
}
}<input type="number" id="numberinput" oninput="myFunction()">
<p id="displaynumber"></p>
<button type="submit" value="Submit" onclick="submtValue()">Submit</button>您可以在输入上添加按键事件，如onkeydown或onkeypress，这将触发每次输入内的类型，一旦条件满足，则提交