更改占位符會觸發IE 10中的輸入事件

Question

基本問題

input事件--calls-> update() -- geoInput.receive() > geoInput.receive() --triggers-> input事件

說明

好的，我遇到了一個奇怪的問題，這導致我的代碼無限循環。 我有以下幾位jQuery：

var geoInput = $('#Geo').on('input', function() {
  _this._controller.update({
    geo: this.value
  });
}).get(0);

如您所見，它只是一個基本的事件偵聽器，並且正在我的控制器中調用更新函數。 更新功能的最后是廣播geoInput字段進行更新的方法。 這由以下方法處理：

geoInput.receive = function(formState) {
  this.value = formState.geo;
  this.placeholder = _this._placeholders.geo;
}

由於某些原因

this.placeholder = _this._placeholders.geo; 

在該字段上觸發input事件。 您會看到這會造成無限循環，這會帶來問題。 我確定這是正在發生的事情，因為當我在該行之前return ，不會發生循環。 另外，如果我改說一個keyup事件，則也不會發生循環。

題

為什么會發生這種情況，我該如何解決？

我試過了！

我已經看了幾個小時了，做了很多搜索都沒有用。 該代碼可以在Chrome和FF中正常運行。

Answer 1

有趣的是，如果您只是將一個項目添加到INPUT屬性的placheholder或拉丁字母以外的值，則會發生INPUT事件。 是IE10和IE11的問題

var $input = $('<input type="text" placeholder="Бубу"/>');
//or
var $input = $('<input type="text" value="世界へようこそ"/>');
$input.on('input',function(){
    alert('input even occur');
});

Answer 2

我認為您可以通過以下代碼解決此問題：

var previousGeoInput = '';
var geoInput = $('#Geo').on('input', function() {
  if (previousGeoInput === this.value) {
    return;
  }
  previousGeoInput = this.value;
  _this._controller.update({
    geo: this.value
  });
}).get(0);

Answer 3

檢查事件鍵碼/字符碼是否為0，則表明IE愚蠢，您可以取消事件。