检测输入类型文本的编程更改

Question

有没有办法在脚本更改输入类型文本的值时获得通知。

我有

<input id='test' type='text' />

还有一个脚本

document.getElementById('test').value = 'bbb'; 

我希望收到有关文本更改的通知。

我知道我可以通过 keydown、keyup、onblur 等通知我（如果我试图跟踪用户输入，这会起作用）但是如果以编程方式完成更改呢？

非常感谢

附言 请不要使用 JQuery，或者如果 jquery 可以，有人可以解释它是如何实现的。

Answer 1

如果您使用的是现代浏览器，您可以尝试以下方式：

var input = document.getElementById('test');
input._value = input.value;
Object.defineProperty(input, "value", {
    get: function() {return this._value;},
    set: function(v) {
        // Do your stuff
        this._value = v;
    }
});

如果您实际上不期望任何用户输入（即隐藏类型输入字段），则此解决方案很好，因为它极具破坏性 DOM 基本功能。请记住这一点。

Answer 2

我发现最简单的方法是手动触发事件：

document.getElementById('test').value = 'bbb';
var evt = new CustomEvent('change');
document.getElementById('test').dispatchEvent(evt);

当以编程方式更改值时，仅收听change 事件很容易出错。但是由于您要更改值，因此添加两行并使用 CustomEvent 触发更改事件。

那么您将能够捕捉到这个 change 事件，无论是内联：

<input id="test" onchange="console.log(this)">

或与听众一起：

document.getElementById('test').addEventListener('change',function(event) {
    console.log(event.target);
});

这样做的好处是，如果您有一个可由用户更改的输入，您可以捕获这两个事件（来自用户或脚本）

然而，这取决于您自己以编程方式更改输入值的事实。如果您使用的库（例如 datepickr）会更改您的输入值，您可能需要进入代码并将这两行添加到正确的位置。

现场演示：

// input node reference
const inputElem = document.querySelector('input')

// bind "change" event listener
inputElem.addEventListener('change', e => console.log(e.target.value))

// programatically change the input's value every 1 second
setInterval(() => { 
  // generate random value
  inputElem.value = Math.random() * 100 | 0; 
  
  // simulate the "change" event
  var evt = new CustomEvent('change')
  inputElem.dispatchEvent(evt)
}, 1000);

<input>