Какое событие запускается, когда пользователь отменяет ввод через кнопку отмены веб-кат?

Некоторые браузеры, такие как Chrome, предоставляют дополнительную кнопку отмены поиска на входах с type="search", как показано на рисунке ниже.

Обычно keyup с дополнительной проверкой достаточно, чтобы проверить, удалил ли пользователь входную строку (не забирая правый клик). Однако ни keyup, ни change не запускаются, если пользователь отменяет ввод с помощью специальной кнопки отмены, предоставляемой браузерами webkit.

Есть ли какое-то специальное событие для этих кнопок отмены? Или мне нужно проверить одно из уже существующих событий, например click?

Ответ 1

Для этого есть событие: oninput.

Происходит, когда текстовое содержимое элемента изменяется через пользователя интерфейс.

Oninput полезен, если вы хотите определить, когда содержимое textarea, ввод: текст, ввод: пароль или ввод: элемент поиска есть изменено, поскольку событие onchange на этих элементах срабатывает, когда элемент теряет фокус, а не сразу после изменения.

Вот рабочий пример;

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

Ответ 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.");
    }
});

Ответ 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 empty..");   
    } else {
        $("#status").text($(this).val());   
    }
});

Ответ 4

Захватите событие "change", а не событие "keyup". Когда значение текстового поля изменит этот огонь, вы можете проверить, не пустое значение.

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

http://jsfiddle.net/Ebg4M/

Ответ 5

Вначале, когда не было очевидно, что ОП думал о <input type="search"> (как глупо от меня, что я его не читал), я подумал, что это может быть ответ.

Я предполагаю, что "х" не является стандартной частью поля ввода (HTML5 или нет).

Возможно, какой-то элемент сайта добавлен извне, поэтому вас может заинтересовать этот ответ: fooobar.com/questions/45688/...

Edit:

После исследования выяснилось, что нажатие x на Chrome запускает событие click. Также ответы в этом подобном потоке: Как вы обнаруживаете очистку "поиска" ? Ввод HTML5? предполагает, что событие search также запущено.

Ответ 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");
});

Ответ 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!');
    }
});