javascript - 使用清除图标清除 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
        });
    }
});

Answer 7

一个开箱即用的解决方案是完全用 CSS 摆脱 X：

::-ms-clear { display: none; } /* see https://stackoverflow.com/questions/14007655 */

这有以下好处：

1. 更简单的解决方案 - 适合一条线
2. 适用于所有输入，因此您不必为每个输入都有一个处理程序
3. 不存在因逻辑错误而破坏 javascript 的风险（需要较少的 QA）
4. 标准化跨浏览器的行为 - 使 IE 的行为与 chrome 相同，因为 chrome 没有 X

Answer 8

对于我的 asp.net 服务器控制

<asp:TextBox ID="tbSearchName" runat="server" oninput="jsfun_tbSearchName_onchange();"></asp:TextBox>

js

function jsfun_tbSearchName_onchange() {
    if (objTbNameSearch.value.trim() == '')
            objBTSubmitSearch.setAttribute('disabled', true);
        else
            objBTSubmitSearch.removeAttribute('disabled');
        return false;
}

参考

MSDN onchange 事件 - 在 IE10 中测试。

...或用 CSS 隐藏：

input[type=text]::-ms-clear { display: none; }

Answer 9

上面的代码在我的情况下不起作用，我已经更改了一行并介绍$input.typeahead('val', '');了在我的情况下有效的..

// There are 2 events fired on input element when clicking on the clear button:// mousedown and mouseup.
$("input").on('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 === ''){
            $input.typeahead('val', '');
            e.preventDefault();
        }
    }, 1);
});