更改占位符会触发IE 10中的输入事件

Changing placeholder triggers input event in IE 10

本文关键字：输入 入事件 IE 占位符      更新时间：2023-09-26

基本问题

input事件—调用-->update()—调用-->geoInput.receive()—触发-->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;

正在触发该字段上的CCD_ 6事件。您可以看到这是如何产生问题的，因为这会创建一个无限循环。我确信这就是发生的事情，因为当我在那行之前return时，循环不会发生。此外，如果我改为keyup事件，循环也不会发生。

问题

为什么会发生这种情况，我该如何解决？

我试过了

我已经看了几个小时了，做了很多搜索都没有结果。此代码在Chrome和FF中正常工作。

有趣的是，如果您只是将一个项目添加到INPUT属性占位符或拉丁字母以外的值，就会发生INPUT事件。这是IE10和IE11 的问题

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

在没有看到你的小提琴的情况下，我认为你可以用以下代码来解决这个问题：

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

检查事件keycode/charcode，如果它为0，则表明IE愚蠢，您可以取消该事件。

相关文章：