使用change事件无法触发机器填充输入框回调，应选用什么合适事件？

change事件仅在输入框失去焦点且值发生变更时才会触发，不符合值更新后立即执行逻辑的需求，可根据你的机器填值的实现逻辑选择对应方案：

方案1：使用input事件（适用绝大多数场景，含模拟键盘输入的自动填充/扫码设备） #

input事件会在输入框值发生任何变更时实时触发，不需要等待失焦，直接替换绑定的事件即可：

const scannerInput = document.querySelector('.scanner-input');
const check = document.querySelector(".check");
 
// 仅需要将事件名从change替换为input
scannerInput.addEventListener('input', () => {
    test();
    scannerInput.value = "";
    scannerInput.focus();
}); 

function test(params) {
    const tr = document.createElement('tr');
    tr.innerHTML = `<td>${scannerInput.value}</td>`;
    check.append(tr);
}

提示：如果设备是逐字符输入导致input事件频繁触发，可添加防抖逻辑，延迟执行test()避免多次调用。

方案2：监听value属性变更（适用机器直接通过JS修改value属性的场景） #

如果你的设备是直接修改输入框的value属性（不会触发原生的input/change事件），可以通过重写value的setter实现值变更监听：

const scannerInput = document.querySelector('.scanner-input');
const check = document.querySelector(".check");

// 重写输入框的value属性setter，监听值变更
const originalValueDesc = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
Object.defineProperty(scannerInput, 'value', {
    get() {
        return originalValueDesc.get.call(this);
    },
    set(newVal) {
        originalValueDesc.set.call(this, newVal);
        test();
        scannerInput.value = "";
        scannerInput.focus();
    }
});

function test(params) {
    const tr = document.createElement('tr');
    tr.innerHTML = `<td>${scannerInput.value}</td>`;
    check.append(tr);
}

内容的提问来源于stack exchange，提问作者Kei