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

Question

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

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

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

Answer 1

有一个事件：oninput。

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

如果您想检测 textarea、input:text、input:password 或 input:search 元素的内容何时发生更改，oninput 很有用，因为这些元素上的 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..." />

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

Answer 3

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

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

Answer 4

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

Answer 5

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

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

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

编辑：

经过研究，我发现单击xChrome 会触发该click事件。还有这个类似线程中的答案：如何检测“搜索”HTML5 输入的清除？建议该search事件也被触发。

Answer 6

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

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

http://jsfiddle.net/Ebg4M/

Answer 7

您可以使用 bind 来捕获多个事件，正如Eric Warnke在jQuery .keyup() vs .change() vs .bind()中演示的那样

这是一个基于Emre Erkan的分叉小提琴：

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