javascript 当用户通过 webkit 取消按钮取消输入时会触发什么事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16190870/
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
What event is triggered when the user cancels input via the webkit cancel button?
提问by Damien Roche
Some browsers like Chrome provide an additional search cancel button on inputs with type="search", as seen in the picture below.
一些浏览器（如 Chrome）在输入上提供了一个额外的搜索取消按钮type="search"，如下图所示。
Usually the keyupwith an additional check is sufficient to test whether the user deleted the input string (not taking right click into account). However neither keyupnor changeget triggered if the user cancels the input via the special cancel button provided by webkit browsers.
通常keyup，附加检查足以测试用户是否删除了输入字符串（不考虑右键单击）。但是，如果用户通过 webkit 浏览器提供的特殊取消按钮取消输入，则既不会keyup也不会change被触发。
Is there some kind of special event for those cancel buttons? Or do I have to check one of the already existing events like click?
那些取消按钮有什么特殊事件吗？或者我是否必须检查已经存在的事件之一，例如click？
回答by Emre Erkan
There is an event for this: oninput.
有一个事件：oninput。
Occurs when the text content of an element is changed through the user interface.
The oninput is useful if you want to detect when the contents of a textarea, input:text, input:password or input:search element have changed, because the onchange event on these elements fires when the element loses focus, not immediately after the modification.
当通过用户界面更改元素的文本内容时发生。
如果您想检测 textarea、input:text、input:password 或 input:search 元素的内容何时发生更改，则 oninput 很有用，因为这些元素上的 onchange 事件会在元素失去焦点时触发，而不是在修改后立即触发.
Here is a working example;
这是一个工作示例；
$('#search').on('input', function(e) {
if('' == this.value) {
alert('Please enter a search criteria!');
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="search" name="search" id="search" placeholder="Search..." />回答by MythThrazz
There is an event for this: onsearch.
有一个事件：onsearch。
Actions that invoke the onsearch event:
调用 onsearch 事件的操作：
Pressing the ENTER key or clicking the 'Erase search text' button in a search control.
按 ENTER 键或单击搜索控件中的“擦除搜索文本”按钮。
Here is an example:
下面是一个例子：
HTML:
HTML：
<input type="search" name="search" id="search" placeholder="Search..." />
jQuery:
jQuery：
$('#search').on('search', function(e) {
if('' == this.value) {
alert("You either clicked the X or you searched for nothing.");
}
});
回答by Robin van Baalen
Listening to the click event seems to work in my Fiddle:
听点击事件似乎在我的小提琴中工作：
HTML
HTML
<input type="search" value="hello" />
<span id="status"></span> <!-- Just an example -->
Javascript
Javascript
$("input").on("click keyup", function () {
if ($(this).val() == "") {
$("#status").text("WTF it's empty..");
} else {
$("#status").text($(this).val());
}
});
回答by MythThrazz
At first, when it wasn't obvious that the OP thought of <input type="search">(how silly of me that I didn't read his mind) I thought it maybe the answer.
起初，当 OP 的想法并不明显时<input type="search">（我没有读懂他的想法是多么愚蠢），我认为这可能是答案。
I guess that the 'x' is not a standard part of the input field (HTML5 or not).
我猜“x”不是输入字段的标准部分（是否为 HTML5）。
It's probably some site element added externally, that's why you may be interested in this answer: https://stackoverflow.com/a/6258628/2107024
这可能是外部添加的一些站点元素，这就是您可能对这个答案感兴趣的原因：https: //stackoverflow.com/a/6258628/2107024
Edit:
编辑：
After research I found out that clicking the xon Chrome fires the clickevent. Also the answers in this similar thread: How do you detect the clearing of a "search" HTML5 input?suggest that the searchevent is fired aswell.
经过研究，我发现点击xChrome 会触发该click事件。还有这个类似线程中的答案：如何检测“搜索”HTML5 输入的清除？建议search事件也被触发。
回答by nbrooks
Capture the 'change' event, rather than the 'keyup' event. When the value of the text field changes this fires, and you can check if the value is blank.
捕获 'change' 事件，而不是 'keyup' 事件。当文本字段的值发生变化时，这会触发，您可以检查该值是否为空。
$('input[type="search"]').on('change', function() {
if ($(this).val() == "") {
alert('clear');
}
});
回答by Karl Kieninger
You can use bind to capture multiple events as Eric Warnkedemonstrated in jQuery .keyup() vs .change() vs .bind()
您可以使用 bind 来捕获多个事件，如Eric Warnke在jQuery .keyup() vs .change() vs .bind() 中演示的那样
Here's a forked fiddlebased on Emre Erkan's:
$('#search').bind("change keyup input", function(e) {
if('' == this.value) {
alert('Please enter a search criteria!');
}
});
回答by mplungjan
Here is an alternative to oninput which will monitor the field while it is focussed
这是 oninput 的替代方案，它将在聚焦时监视该字段
function tell(fld,id) {
$("#"+id).html((fld.val()==""?"Clear":"Not clear")+" - "+new Date())
}
$(function() {
$("#search").on("focus",function() {
var srch = $(this);
var tId = setInterval(function() { tell(srch,"status") },100);
$(this).data("tId",tId);
})
.on("blur",function() {
clearInterval($(this).data("tId"));
});
tell($("#search"),"status");
});
