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

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

有没有办法在 javascript 中用 Internet Explorer 10捕捉同样的事件？

enter image description here

70376 次浏览
小开
最佳答案

我终于找到了唯一的解决办法:

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

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

我知道这个问题已经得到了回答，但是在我们的情况下，这个被接受的答案并不起作用。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"的原因。

干杯！

小开

oninput事件触发时，this.value设置为空字符串。这解决了我的问题，因为我想执行相同的操作，无论他们清除搜索框与 X 或退格。这只适用于 IE10。

小开

The above code was not working in my case and I have changed one line and introduced $input.typeahead('val', ''); which works in my case..

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

我们可以只听 input事件。详情请参阅 参考文献。这就是我如何在 IE 上用 Sencha ExtJS 中的 clear 按钮修复一个问题:

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

为什么不呢

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

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

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

一个开箱即用的解决方案是完全用 CSS 去掉 X:

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

这有以下好处:

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

提交答案