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


82

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

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

在此处输入图片说明



不,这全是关于IE10的内容。在webkit上,我知道如何处理。
ghusse

清除字段时,IE10中不会触发任何事件。
wakooka

1
嗯,也许仍然值得一试,但看起来IE也有一个错误的“输入”事件:help.dottoro.com/ljhxklln.php(仅在添加文本时触发,而不是在删除时触发!)
natevw

3
@ghusse'input'事件被触发。
2013年

Answers:


72

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

// 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);
});

1
谢谢古斯!如果有人提出其他解决方案(没有setTimeout),请告诉我。
他Nrik

这也适用于ASP.NET/jQuery/IE11。代替$(“ input”)。bind(“ mouseup”,function(e){,您需要使用$('#<%= MyTextBox.ClientID%>')。mouseup(function(){
Joe Schmoe,

3
下面的朗讯解决方案在IE11中对我有效。他的解决方案是改用oninput事件。当您按下X图标时,input事件就会触发。
iheartcsharp 2015年

if语句不应该if (oldValue === "")吗?
Dylan Czenski '16

虽然朗讯的带有input-event的解决方案可以工作,但该解决方案的优越之处在于,它仅在清除元素时才触发,而朗讯的鼠标指针进入元素,离开元素以及输入数据时也触发。
spheenik '17

40

设置为空字符串时oninput触发该事件this.value。这对我来说解决了这个问题,因为无论他们用X还是退格清除搜索框,我都想执行相同的操作。这仅在IE 10中有效。


1
这在IE10中也对我有效,不要认为IE上的早期版本具有明确的字段按钮,因此只需要为IE10工作
andyface 2014年

3
也可以在IE11中使用!
AfroMogli

1
这同样适用于Chrome和Firefox,并且在用户右键单击鼠标并削减值时也会触发。要进行连接,请使用:inputEl.addEventListener('input', function(){ /* DoSomething */ })
德里克


10

为什么不

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

1
如果用户只是用键盘删除了一些文本怎么办?
ghusse 2015年

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

通过单击和拖动,除了按键盘的del按钮外,我看不到如何清除文本字段。
ghusse 2015年

@ghusse请选择所有文本,然后尝试拖动到其他文本框。如果这不起作用,请尝试按Alt键。
Ertug

似乎这是一天结束时更好的答案,尽管可能不是100%针对该问题。似乎涵盖了所有情况,甚至可以从chrome自动完成。
2015年

8

我知道此问题已得到解答,但在我们的情况下,接受的答案无效。IE10无法识别/触发该$input.trigger("cleared");语句。

我们的最终解决方案使用ENTER键(代码13)上的keydown事件替换了该语句。对于后代,这是在我们的案例中有效的方法:

$('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上搜索)
punkologist 2015年

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
        });
    }
});

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

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

2

一个现成的解决方案是仅使用CSS完全摆脱X:

::-ms-clear { display: none; } /* see /programming/14007655 */

这具有以下好处:

  1. 更简单的解决方案-只需一行
  2. 适用于所有输入,因此您不必为每个输入都具有处理程序
  3. 不会因逻辑错误而破坏javascript(无需进行质量检查)
  4. 跨浏览器标准化行为-使IE的行为与chrome相同,因为chrome没有X

1

用于我的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; }

0

上面的代码不适用于我的情况,我更改了一行,并介绍$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);
});
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.