清除IE10上的文本input并清除图标时触发事件

在Chrome上，当用户单击清除button时，searchinput会触发“search”事件。

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

Answer 1

我终于find的唯一解决scheme：

// 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设置为一个空string。 这为我解决了这个问题，因为我想执行相同的操作，无论是用X还是退格来清除search框。 这仅适用于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"); 声明。

我们的最终解决scheme用ENTER键上的keydown事件replace了这个语句（代码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); }); 

另外，我们想把这个绑定仅应用于“search”input，而不是页面上的每个input。 自然，IE做了这个也很困难…虽然我们编写了<input type="search"...> ，IE把它们呈现为type="text" 。 这就是为什么jQueryselect器引用type="text" 。

干杯!

Answer 6

我们只能听input事件。 详情请参阅参考资料 。 这是我如何解决在IE上的Sencha ExtJS清除button的问题：

 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

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

REF

MSDN onchange事件 – 在IE10中testing。

…或用CSS隐藏：

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

Answer 8

上面的代码不工作在我的情况下，我改变了一行，并引入$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); });