在chrome上,当用户单击清除按钮时,将在搜索输入上触发“搜索”事件。
有没有办法在Internet Explorer 10上的javascript中捕获同一事件?
在chrome上,当用户单击清除按钮时,将在搜索输入上触发“搜索”事件。
有没有办法在Internet Explorer 10上的javascript中捕获同一事件?
Answers:
我终于找到的唯一解决方案:
// 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);
});
oninput
事件。当您按下X图标时,input
事件就会触发。
if (oldValue === "")
吗?
input
-event的解决方案可以工作,但该解决方案的优越之处在于,它仅在清除元素时才触发,而朗讯的鼠标指针进入元素,离开元素以及输入数据时也触发。
设置为空字符串时oninput
触发该事件this.value
。这对我来说解决了这个问题,因为无论他们用X还是退格清除搜索框,我都想执行相同的操作。这仅在IE 10中有效。
inputEl.addEventListener('input', function(){ /* DoSomething */ })
。
使用input
代替。在所有浏览器下,它都具有相同的行为。
$(some-input).on("input", function() {
// update panel
});
为什么不
$("input").bind('input propertychange', function() {
if (this.value == ""){
$input.trigger("cleared");
}
});
我知道此问题已得到解答,但在我们的情况下,接受的答案无效。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"
。
干杯!
我们只能听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
});
}
});
用于我的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; }
上面的代码不适用于我的情况,我更改了一行,并介绍$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);
});