用户通过Webkit取消按钮取消输入时触发什么事件?

问题描述

Chrome等某些浏览器在带有type="search"的输入上提供了一个附加的搜索取消按钮，如下图所示.

Some browsers like Chrome provide an additional search cancel button on inputs with type="search", as seen in the picture below.

通常，对keyup进行额外的检查就足以测试用户是否删除了输入字符串(不考虑右键单击).但是，如果用户通过Webkit浏览器提供的特殊取消按钮取消输入，则keyup和change都不会触发.

Usually the keyup with an additional check is sufficient to test whether the user deleted the input string (not taking right click into account). However neither keyup nor change get triggered if the user cancels the input via the special cancel button provided by webkit browsers.

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

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?

推荐答案

有一个与此相关的事件: oninput .

There is an event for this: oninput.

如果您想检测何时输入内容，则oninput很有用. textarea，input:text，input:password或input:search元素具有 发生了变化，因为当这些元素上的onchange事件触发时， 元素会失去焦点，而不是在修改后立即消失.

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.

这是一个有效的示例;

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!');
    }
});

这篇关于用户通过Webkit取消按钮取消输入时触发什么事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！