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

Posted 2023-03-04

【中文标题】使用清除图标清除 IE10 上的文本输入时触发的事件

【英文标题】：Event fired when clearing text input on IE10 with clear icon

【发布时间】：2013-01-08 00:50:27

【问题描述】：

在 chrome 上，当用户单击清除按钮时，搜索输入会触发“搜索”事件。

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

【问题讨论】：

可能重复：***.com/questions/2492722/…

不，这个是关于 IE10 的。在 webkit 上，我知道如何处理。

清除字段时在 IE10 中没有触发事件。

嗯，可能仍然值得一试，但看起来 IE 也有一个错误的“输入”事件：help.dottoro.com/ljhxklln.php（仅在添加文本时触发，而不是在删除时触发！）

@ghusse 'input' 事件被触发。

【参考方案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);
);

【讨论】：

感谢古斯！如果有人提出任何其他解决方案（没有 setTimeout），请告诉我。

这也适用于 ASP.NET / jQuery / IE11。而不是 $("input").bind("mouseup", function(e) 您需要使用 $('#').mouseup(function ()

Lucent 下面的解决方案在 IE11 中适用于我。他的解决方案是改用oninput 事件。当您按下 X 图标时，input 事件会触发。

if 语句不应该是if (oldValue === "")吗？

虽然 Lucent 使用 input-event 的解决方案有效，但该解决方案的优势在于它仅在元素被清除时触发，而 Lucent 的也会在光标进入元素时触发，离开元素，以及输入数据时。

【参考方案2】：

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

【讨论】：

这在IE10中也适用于我，不要认为IE上的早期版本有清除字段按钮，所以应该只适用于IE10

在 IE11 中也可以使用！

这也适用于 Chrome 和 Firefox，并且当用户右键单击鼠标并削减值时也会触发。要连接使用：inputEl.addEventListener('input', function() /* DoSomething */ ).

【参考方案3】：

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

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

【讨论】：

在文档模式 5 的 IE 11 中不起作用，缺少右括号，顺便说一句。

【参考方案4】：

为什么不

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

【讨论】：

如果用户只是用他的键盘删除了一些文本怎么办？

@ghusse 您还可以通过单击并拖动来清除文本字段，而无需使用该按钮。所以接受的答案也会失败。我猜 OP 提出了这个问题，因为当用户按下清除字段按钮时，他希望收到事件通知。

通过单击和拖动，我看不到如何清除文本字段，除非按键盘上的 del 按钮。

@ghusse 请选择所有文本并尝试拖动到其他文本框。如果这对您不起作用，请尝试按下 Alt 键。

似乎这是一天结束时更好的答案，尽管可能不是 100% 特定于该问题。似乎涵盖了各种情况，甚至可以从 chrome 自动完成。

【参考方案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" 的原因。

干杯！

【讨论】：

很棒，为我工作，虽然我触发了 keyup（我的代码查找 2 个字符并自动搜索 keyup）

【参考方案6】：

我们可以只听input 事件。详情请见the reference。这就是我解决 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
        );
    
);

【讨论】：

此答案适用于 MS Edge，单击“x”以清除搜索字段时会触发“输入”事件。

我正在使用 vanilla js，MS Edge 在单击 X 时不会触发输入事件。我想无论如何尝试观看此类事件都是个坏主意。最好像普通表单一样使用按钮。

【参考方案7】：

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

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

这有以下好处：

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

【参考方案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 event - 在 IE10 中测试。

... 或用 CSS 隐藏：

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

【参考方案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);
);