虚拟数字键盘输入时input事件未触发，如何触发校验函数？

核心原因 #

虚拟键盘直接修改input的value属性时，浏览器不会自动触发keyup/input这类用户输入事件，所以你绑定的校验函数不会执行。

可行方法 #

方法1：虚拟键盘修改值后手动触发标准事件 #

因为你的虚拟键盘是通过AJAX加载的，请求时已经传入了目标input的ID，所以可以在numPad.php生成的键盘按钮点击逻辑里，修改完input的值后，手动触发对应的事件。

假设numPad.php里的按钮点击逻辑是这样的，修改成下面的代码：

<?php
$inputID = $_GET['inputID'];
?>
<button onclick="appendToInput('1')">1</button>
<button onclick="appendToInput('2')">2</button>
<!-- 其他数字按钮同理 -->

<script>
function appendToInput(char) {
  const targetInput = document.getElementById('<?php echo $inputID; ?>');
  // 追加字符到input
  targetInput.value += char;
  // 手动触发input事件（也可以触发keyup事件，对应你原来的绑定）
  targetInput.dispatchEvent(new Event('input'));
  // 如果要兼容原来的onkeyup，也可以触发keyup事件
  // targetInput.dispatchEvent(new Event('keyup'));
}
</script>

这样不管是物理键盘还是虚拟键盘输入，input的oninput（或者onkeyup）事件都会触发，自动执行绑定的checkNationalCode函数，而且键盘依然通用，不需要针对不同input写特定逻辑。

方法2：用MutationObserver监听input值变化 #

如果不想修改numPad.php的代码，可以在appearNumPad函数里给目标input添加一个值变化监听器，只要value改变就执行校验函数：

function appearNumPad(obj){
    document.getElementById("numPadContainer").style.display = "block";

    // 创建监听器，监听input值变化
    const observer = new MutationObserver(() => {
        // 直接调用当前input绑定的校验函数
        if (obj.onkeyup) {
            // 解析onkeyup中的函数调用，比如从"checkNationalCode(this);"提取函数
            const funcName = obj.onkeyup.match(/(\w+)\(this\);/)[1];
            window[funcName](obj);
        }
    });
    // 监听input的value属性变化
    observer.observe(obj, { attributes: true, attributeFilter: ['value'] });

    // 原有AJAX代码
    let request = new XMLHttpRequest;
    request.open("GET", "../common/numPad.php?inputID="+obj.id);
    request.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("numPadContainer").innerHTML=this.responseText;
        }
     };
    request.send();
}

这个方法不需要修改虚拟键盘的代码，直接在input聚焦时监听值变化，不管值是怎么被修改的，都会触发校验。

注意事项 #

• 优先用方法1，因为手动触发标准事件更符合浏览器的事件机制，也能兼容你原来绑定的任何输入事件（不管是onkeyup还是oninput）。
• 方法2中，部分浏览器对value属性的Mutation监听可能有兼容性问题，所以方法1更可靠。

内容的提问来源于stack exchange，提问作者hata.IR