当用户通过 webkit 取消按钮取消输入时会触发什么事件？答案

【问题标题】：What event is triggered when the user cancels input via the webkit cancel button?当用户通过 webkit 取消按钮取消输入时会触发什么事件？
【发布时间】：2013-04-17 22:30:45
【问题描述】：

一些浏览器（如 Chrome）在带有 type="search" 的输入上提供了一个额外的搜索取消按钮，如下图所示。

通常带有附加检查的keyup 足以测试用户是否删除了输入字符串（不考虑右键单击）。但是，如果用户通过 webkit 浏览器提供的特殊取消按钮取消输入，keyup 和 change 都不会被触发。

这些取消按钮是否有某种特殊事件？还是我必须检查已经存在的事件之一，例如click？

【问题讨论】：

我已经删除了所有以前的 cmets，因为它们基本上都是粗鲁/没有建设性的，或者，现在帖子已经过编辑，已经过时了。
没问题，谢谢克里斯。

标签： javascript jquery html

【解决方案1】：

为此有一个事件：oninput。

当通过用户更改元素的文本内容时发生界面。

如果你想检测一个 textarea、input:text、input:password 或 input:search 元素有已更改，因为这些元素上的 onchange 事件会在元素失去焦点，而不是在修改后立即失去焦点。

这是一个工作示例；

$('#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..." />

【讨论】：

我一直忘记这个...我相信它也可以用于从手持扫描仪粘贴东西时使用

【解决方案2】：

为此有一个事件：onsearch。

调用 onsearch 事件的操作：

按 ENTER 键或单击搜索控件中的“擦除搜索文本”按钮。

这是一个例子：

HTML：

<input type="search" name="search" id="search" placeholder="Search..." />

jQuery：

$('#search').on('search', function(e) {
    if('' == this.value) {
        alert("You either clicked the X or you searched for nothing.");
    }
});

【讨论】：

clicking the 'Erase search text' button 会触发“搜索”事件对我来说似乎很奇怪。他们为什么要这样做？
@RobinvanBaalen 让您的开发人员可以处理输入为空并让您完全控制您需要决定什么是“搜索”事件？
这绝对适用于 webkit，所以它是一个合适的答案；但是，它在 ie10+ 中不起作用

【解决方案3】：

您可以使用bind 来捕获多个事件，如Eric Warnke 中所展示的jQuery .keyup() vs .change() vs .bind()

Here's a forked fiddle 基于Emre Erkan 的：

$('#search').bind("change keyup input", function(e) {
    if('' == this.value) {
        alert('Please enter a search criteria!');
    }
});

【讨论】：

【解决方案4】：

这里是 oninput 的替代方法，它会在聚焦时监控字段

DEMO

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");
});

【讨论】：

【解决方案5】：

起初，当 OP 想到 <input type="search"> 并不明显时（我真傻，我没有读懂他的想法）我认为这可能是答案。

我猜“x”不是输入字段的标准部分（HTML5 与否）。

这可能是一些从外部添加的站点元素，这就是您可能对这个答案感兴趣的原因：https://stackoverflow.com/a/6258628/2107024

编辑：

经过研究，我发现在 Chrome 上单击 x 会触发 click 事件。同样在这个类似线程中的答案：How do you detect the clearing of a "search" HTML5 input? 建议search 事件也被触发。

【讨论】：

恐怕它至少是 Chrome 的标准配置。
也许你应该在猜测之前阅读 HTML5 表单元素。 X 是基于 Webkit 的浏览器中 HTML5 搜索类型字段的一部分。
也许可以提供代码，所以很明显你问的是<input type="search">而不是<input type="text">，而想要帮助你的人不必猜测？ -_-'

【解决方案6】：

捕获'change' 事件，而不是'keyup' 事件。当文本字段的值发生变化时，会触发此事件，您可以检查该值是否为空。

$('input[type="search"]').on('change', function() {
    if ($(this).val() == "") {
        alert('clear');
    }
});

http://jsfiddle.net/Ebg4M/

【讨论】：

onChange 仅在输入字段模糊时触发。
这不会检测到keyup 上的更改，或者当用户单击“x”图标以清除该字段时。 Chrome 似乎将此图标添加到 html5 搜索字段中。
@Zenph 如果您希望人们帮助您，也许您应该提供一些示例代码来显示“keyup”不起作用以及魔术“x”正在显示的位置。大多数人不知道你在说什么。
甚至$('input[type="text"]').on('change', 与$('input[type="text"]').change 相同
@RobinvanBaalen 我担心人们已经阅读了这个问题，清楚地看到我提到了 html5 输入和这个“x”图标，但不知道我在说什么！？

【解决方案7】：

收听点击事件似乎在我的小提琴中工作：

http://jsfiddle.net/S5n84/1/

HTML

<input type="search" value="hello" />
<span id="status"></span> <!-- Just an example -->

Javascript

$("input").on("click keyup", function () {
    if ($(this).val() == "") {
        $("#status").text("WTF it's empty..");   
    } else {
        $("#status").text($(this).val());   
    }
});

【讨论】：

几乎！谢谢。当用户第一次点击输入并且已经为空时怎么办？
然后，您有一个空字段，因此显示错误。这很有道理，对吧？
@Zenph 为此在数据中存储dirty 标志。
如果我想触发每次点击，那么是的，非常有意义。但我没有;) 澄清一下 - 我正在清除搜索字段，并清除 ajax 过滤器。这将在首次单击字段时执行 ajax 查询。
@DipeshParmar 您可以在一个.on() 侦听器中混合和匹配任意数量的事件。但为了可读性，建议您仅将有意义的事件组合在一起。在事件处理程序中，您可以执行event.type 来获取实际触发的事件。