43

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

我有

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

和一个脚本

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

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

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

非常感谢

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

4

2 回答 2

24

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

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 基本功能具有极大的破坏性。记在脑子里。

于 2013-04-15T10:52:02.373 回答
23

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

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>

于 2015-05-07T19:53:54.193 回答