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

Question

Chrome等浏览器会在type="search"的输入上提供额外的搜索取消按钮，如下图所示。

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

这些取消按钮是否有某种特殊事件？或者我是否必须检查其中一个已存在的事件，例如click？

Answer 1

有一个事件：oninput。

  

在通过用户更改元素的文本内容时发生   接口

     

如果要检测a的内容，oninput很有用   textarea，输入：文本，输入：密码或输入：搜索元素有   改变了，因为当这些元素上的onchange事件触发时   元素在修改后不会立即失去焦点。

这是一个有效的example;

HTML：

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

jQuery的：

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

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

捕获＆＃39;更改＆＃39;事件，而不是＆＃39; keyup＆＃39;事件。当文本字段的值改变时，它会触发，您可以检查该值是否为空。

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

http://jsfiddle.net/Ebg4M/

Answer 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事件也会被触发。

Answer 6

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

Answer 7

您可以使用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!');
    }
});