通过条形码扫描器填充输入字段后立即检测

Question

我有两个输入字段productName和quantity,productName字段正在使用条形码扫描器填充(不能访问代码)，我的要求是检测尽快在productName字段中填充值，以便我可以解析值并填充第二个字段quantity。

<input type="text" id="productName" name="productName">
<input type="text" id="quantity" name="quantity">

由于我无法访问扫描条形码并填充productName字段的代码，因此我认为有一种可能性是反复检查该字段是否有值，如

下面

myVar = setInterval(checkValue, 1000);
function checkValue(){
var productName= document.getElementById("productName");
console.log("running");
if (productName && productName.value) {
document.getElementById("quantity").value=productName.value;
clearInterval(myVar);
}
}

但我正在寻找一个更好的方法在香草Javascript，有一个替代的解决方案吗?

Answer 1

您可以使用onchange。

例子:

const productNameField = document.querySelector('#productName');
const quantityField = document.querySelector('#quantity');
const populateQuantityField = () => {
quantityField.value = productNameField.value;
}
productNameField.addEventListener('change', populateQuantityField);

---

进一步阅读:

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
• https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onchange