如何用JS同时检测输入框的程序赋值变更与键盘输入变更

你当前的代码通过重写value属性的描述符已经覆盖了JS程序赋值的变更场景，只需额外绑定input事件即可覆盖键盘输入、粘贴等用户交互触发的变更场景，同时增加标志位避免重复执行同步逻辑。

修改后的完整代码如下：

JavaScript 代码 #

const input = document.getElementById('productName');
const quantityInput = document.getElementById("quantity");
const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), 'value');
// 标志位：标记是否为程序触发的赋值，避免重复执行同步逻辑
let isProgrammaticChange = false;

Object.defineProperty(input, 'value', {
    set: function(t) {
        console.log('Input value was changed programmatically');
        descriptor.set.apply(this, arguments);
        isProgrammaticChange = true;
        quantityInput.value = t;
        isProgrammaticChange = false;
    },
    get: function() {
      return descriptor.get.apply(this);
    }
});

// 监听用户交互触发的输入变更
input.addEventListener('input', function() {
    if (!isProgrammaticChange) {
        console.log('Input value was changed by user operation');
        quantityInput.value = this.value;
    }
});

var i=0;
function changeInput(){
    document.getElementById("productName").value=i++;
}

HTML 代码 #

<input type="text" id="productName" name="productName"  placeholder="product name">
<input type="text" id="quantity" name="quantity" placeholder="quantity">
<button onclick="changeInput()">Change</button>

该方案可覆盖所有常见的输入变更场景：

• JS代码直接修改value属性的场景
• 用户键盘输入、删除、剪切、粘贴等交互触发的变更场景
• 输入法候选词确认后的变更场景

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