IE上的onchange事件和程序输入值更改冲突

Question

我注意到在不同版本的Internet Explorer中，当输入的值被js函数更改时，不会捕获onchange事件，行为不会与其他浏览器一起使用，例如Mozilla或Chrome。

稍微调查一下，我发现当js改变了值时，IE中onchange的正确操作无法保证：

• onchange not fired on IE

• onchange not fired when autocomplete is on

  示例（在IE上测试）：

＆＃13;

＆＃13;

function onchangeRequest(){
  console.log('onchange fired');
}

function changeValue (input){
  input.value +=  "hello"
}

＆＃13;

<h4> focus lost doesnt invoke onchangeRequest() </h4>

<input id="valueInput"  onkeyup="changeValue(this);" onchange="onchangeRequest();" />

<h4> focus lost invokes onchangeRequest() </h4>

<input id="valueInput" onchange="onchangeRequest();" />

＆＃13;

＆＃13;

＆＃13;

我没有找到令人信服的解释，说明为什么IE无法正确解决这些问题。这是一个已知的错误＆＃34;我们要处理哪个？是否有任何官方参考声称IE不保证onchange事件的正确行为？

Answer 1

我发现多年来微软遵循的策略是在浏览器中没有遵循W3C标准，但根据IE自己的规范行为是正确的：

  

当选择对象的选定选项以编程方式更改时，onchange事件不会触发。

参考：MSDN - onchange event

可能的解决方法解决此问题并使您的解决方案跨浏览器：

• onfocus：将输入值保存在expando property
上
• onblur：调用js函数，将旧值与当前值进行比较。

在我的现实生活场景中，我需要在输入值发生变化时触发ajax动作，因此使用onblur事件而不比较更改将导致对后端进行大量不必要的调用。

以下是一个例子：

＆＃13;

＆＃13;

function onchangeRequest(input){
  if(input.value != input.oldValue){
      console.log('value changed: do ajax request');
  }else{
      console.log('value didnt change');
  }
}

function changeValue (input){
     input.value +=  "add"
 }

＆＃13;

<input id="valueInput" onkeyup="changeValue(this);" onfocus="this.oldValue = this.value;" onblur="onchangeRequest(this);" />

＆＃13;

＆＃13;

＆＃13;