清除IE10上带有清除图标的文本输入时触发事件

Question

在chrome上,当用户单击"清除"按钮时,会在搜索输入上触发"搜索"事件.

有没有办法在Internet Explorer 10上的javascript中捕获相同的事件？

Answer 1

我终于找到的唯一解决方案:

// There are 2 events fired on input element when clicking on the clear button:
// mousedown and mouseup.
$("input").bind("mouseup", function(e){
  var $input = $(this),
      oldValue = $input.val();

  if (oldValue == "") return;

  // When this event is fired after clicking on the clear button
  // the value is not cleared yet. We have to wait for it.
  setTimeout(function(){
    var newValue = $input.val();

    if (newValue == ""){
      // Gotcha
      $input.trigger("cleared");
    }
  }, 1);
});

Answer 2

该oninput事件与触发this.value设置为空字符串.这解决了我的问题,因为我想执行相同的操作,无论他们用X还是通过退格清除搜索框.这仅适用于IE 10.

Answer 3

请input改用.它在所有浏览器下都具有相同的行为.

$(some-input).on("input", function() { 
    // update panel
});

Answer 4

为什么不

$("input").bind('input propertychange', function() {
    if (this.value == ""){
      $input.trigger("cleared");
    }
});

Answer 5

我意识到这个问题已得到解答,但接受的答案在我们的情况下不起作用.IE10没有认出/解雇$input.trigger("cleared");声明.

我们的最终解决方案用ENTER键上的keydown事件替换了该语句(代码13).对于后代来说,这就是我们的案例:

$('input[type="text"]').bind("mouseup", function(event) {
    var $input = $(this);
    var oldValue = $input.val();
    if (oldValue == "") {
        return;
    }
    setTimeout(function() {
        var newValue = $input.val();
        if (newValue == "") {
            var enterEvent = $.Event("keydown");
            enterEvent.which = 13;
            $input.trigger(enterEvent);
        }
    }, 1);
});

此外,我们希望仅将此绑定应用于"搜索"输入,而不是页面上的每个输入.当然,IE也很难做到这一点......虽然我们已编码<input type="search"...>,IE将它们渲染为type="text".这就是jQuery选择器引用的原因type="text".

干杯!

Answer 6

我们可以听听这个input事件.有关详细信息,请参阅参考资料 这就是我在IE上使用Sencha ExtJS中的清除按钮修复问题的方法:

Ext.define('Override.Ext.form.field.ComboBox', {
    override: 'Ext.form.field.ComboBox',

    onRender: function () {
        this.callParent();

        var me = this;
        this.inputEl.dom.addEventListener('input', function () {
            // do things here
        });
    }
});