Javascript 使用清除图标清除 IE10 上的文本输入时触发的事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14498396/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Event fired when clearing text input on IE10 with clear icon
提问by ghusse
On chrome, the "search" event is fired on search inputs when user clicks the clear button.
在 chrome 上，当用户单击清除按钮时，会在搜索输入上触发“搜索”事件。
Is there a way to capture the same event in javascript on Internet Explorer 10?
有没有办法在 Internet Explorer 10 上的 javascript 中捕获相同的事件？
采纳答案by ghusse
The only solution I finally found:
我最终找到的唯一解决方案：
// 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);
});
回答by Lucent
The oninputevent fires with this.valueset to an empty string. This solved the problem for me, since I want to execute the same action whether they clear the search box with the X or by backspacing. This works in IE 10 only.
该oninput事件与触发this.value设置为空字符串。这为我解决了这个问题，因为我想执行相同的操作，无论他们是用 X 还是通过退格清除搜索框。这仅适用于 IE 10。
回答by Jeffry Ure?a Miranda
Use inputinstead. It works with the same behaviour under all the browsers.
使用input来代替。它在所有浏览器下都具有相同的行为。
$(some-input).on("input", function() {
// update panel
});
回答by Ertug
Why not
为什么不
$("input").bind('input propertychange', function() {
if (this.value == ""){
$input.trigger("cleared");
}
});
回答by OrangeWombat
I realize this question has been answered, but the accepted answer did not work in our situation. IE10 did not recognize/fire the $input.trigger("cleared");statement.
我意识到这个问题已经得到了回答，但是接受的答案在我们的情况下不起作用。IE10 无法识别/触发该$input.trigger("cleared");语句。
Our final solution replaced that statement with a keydown event on the ENTER key (code 13). For posterity, this is what worked in our case:
我们的最终解决方案用 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);
});
In addition, we wanted to apply this binding only to the "search" inputs, not every input on the page. Naturally, IE made this difficult as well... although we had coded <input type="search"...>, IE rendered them as type="text". That's why the jQuery selector references the type="text".
此外，我们只想将此绑定应用于“搜索”输入，而不是页面上的每个输入。自然，IE 也让这变得很困难……虽然我们已经编码<input type="search"...>，但 IE 将它们呈现为type="text". 这就是 jQuery 选择器引用type="text".
Cheers!
干杯!
回答by jaselg
We can just listen to the inputevent. Please see the referencefor details. This is how I fixed an issue with clear button in Sencha ExtJS on IE:
我们可以只听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
});
}
});
回答by Almenon
An out of the box solution is to just get rid of the X entirely with CSS:
一个开箱即用的解决方案是用 CSS 完全摆脱 X：
::-ms-clear { display: none; } /* see https://stackoverflow.com/questions/14007655 */
This has the following benefits:
这有以下好处：
- Much simpler solution - fits on one line
- Applies to all inputs so you don't have to have a handler for each input
- No risk of breaking javascript with bug in logic (less QA necessary)
- Standardizes behavior across browsers - makes IE behave same as chrome in that chrome does not have the X
- 更简单的解决方案 - 适合在一条线上
- 适用于所有输入，因此您不必为每个输入设置处理程序
- 没有因逻辑错误而破坏 javascript 的风险（不需要 QA）
- 跨浏览器标准化行为 - 使 IE 的行为与 chrome 相同，因为 chrome 没有 X
回答by ablaze
for my asp.net server control
用于我的 asp.net 服务器控件
<asp:TextBox ID="tbSearchName" runat="server" oninput="jsfun_tbSearchName_onchange();"></asp:TextBox>
js
js
function jsfun_tbSearchName_onchange() {
if (objTbNameSearch.value.trim() == '')
objBTSubmitSearch.setAttribute('disabled', true);
else
objBTSubmitSearch.removeAttribute('disabled');
return false;
}
ref
参考
MSDN onchange event- tested in IE10.
MSDN onchange 事件- 在 IE10 中测试。
... or to hide with CSS :
...或用 CSS 隐藏：
input[type=text]::-ms-clear { display: none; }
回答by Maneesh Thareja
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..
上面的代码在我的情况下不起作用，我已经更改了一行并介绍了$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);
});
