Как вы обнаружите очистку «поискового» ввода HTML5?

Question

В HTML5 тип ввода search отображается с маленькой буквой X справа, которая очистит текстовое поле (по крайней мере, в Chrome, может быть, в других). Есть ли способ определить, когда щелкают по этому X в javascript или jQuery, кроме, скажем, обнаружения, когда щелкают по блоку вообще, или выполнения какого-либо определения местоположения по щелчку (x-position / y-position)?

Answer 1

на основе цикла обработки событий js, кнопка click on clear вызовет событие search на входе , поэтому приведенный ниже код будет работать, как и ожидалось:

input.onclick = function(e){
  this._cleared = true
  setTimeout(()=>{
    this._cleared = false
  })
}
input.onsearch = function(e){
  if(this._cleared) {
    console.log('clear button clicked!')
  }
}

Приведенный выше код, событие onclick , зарезервировало цикл события this._cleared = false, но событие всегда будет выполняться после события onsearch, поэтому вы можете стабильно проверить this._cleared статус, чтобы определить, нажал ли пользователь на кнопку X, а затем вызвал событие onsearch.

Это может работать почти при всех условиях , вставленный текст , имеет атрибут incremental , ENTER / ESC нажатие клавиши и т. Д.

Answer 2

При нажатии перекрестной кнопки TextField (X) onmousemove () запускается, мы можем использовать это событие для вызова любой функции.

<input type="search" class="actInput" id="ruleContact" onkeyup="ruleAdvanceSearch()" placeholder="Search..." onmousemove="ruleAdvanceSearch()"/>

Answer 3

Полное решение здесь

Это очистит поиск при нажатии кнопки поиска x.или вызовет поиск API Api, когда пользователь нажмет Enter.этот код может быть дополнительно расширен с помощью дополнительного сопоставителя событий esc-keyup.но это должно делать все это.

document.getElementById("userSearch").addEventListener("search", 
function(event){
  if(event.type === "search"){
    if(event.currentTarget.value !== ""){
      hitSearchAjax(event.currentTarget.value);
    }else {
      clearSearchData();  
    }
  }
});

Приветствия.

Answer 4

Я считаю, что это единственный ответ, который срабатывает ТОЛЬКО при нажатии кнопки x.

Однако, это немного глупо, и ответ Ггутенберга будет работать для большинства людей.

$('#search-field').on('click', function(){
  $('#search-field').on('search', function(){
    if(!this.value){
      console.log("clicked x");
      // Put code you want to run on clear here
    }
  });
  setTimeout(function() {
    $('#search-field').off('search');
  }, 1);
});

Где '#search-field' - селектор jQuery для вашего ввода. Используйте 'input[type=search]' для выбора всех входных данных поиска. Работает, проверяя событие поиска (ответ Пауана) сразу после нажатия на поле.

Answer 5

Поиск или onclick работает ... но проблема, которую я обнаружил, была со старыми браузерами - поиск не удался. Множество плагинов (jquery ui autocomplete или fancytree filter) имеют обработчики размытия и фокуса. Добавление этого в поле ввода автозаполнения работало для меня (использовал this.value == "", потому что это было быстрее для оценки). Размытие и фокусировка удерживают курсор в поле, когда вы нажимаете маленькую «х».

PropertyChange и ввод работали как для IE 10 и IE 8, так и для других браузеров:

$("#INPUTID").on("propertychange input", function(e) { 
    if (this.value == "") $(this).blur().focus(); 
});

Для расширения фильтра FancyTree вы можете использовать кнопку сброса и принудительно вызвать событие щелчка следующим образом:

var TheFancyTree = $("#FancyTreeID").fancytree("getTree");

$("input[name=FT_FilterINPUT]").on("propertychange input", function (e) {
    var n,
    leavesOnly = false,
    match = $(this).val();
    // check for the escape key or empty filter
    if (e && e.which === $.ui.keyCode.ESCAPE || $.trim(match) === "") {
        $("button#btnResetSearch").click();
        return;
    }

    n = SiteNavTree.filterNodes(function (node) {
        return MatchContainsAll(CleanDiacriticsString(node.title.toLowerCase()), match);
        }, leavesOnly);

    $("button#btnResetSearch").attr("disabled", false);
    $("span#SiteNavMatches").text("(" + n + " matches)");
}).focus();

// handle the reset and check for empty filter field... 
// set the value to trigger the change
$("button#btnResetSearch").click(function (e) {
    if ($("input[name=FT_FilterINPUT]").val() != "")
        $("input[name=FT_FilterINPUT]").val("");
    $("span#SiteNavMatches").text("");
    SiteNavTree.clearFilter();
}).attr("disabled", true);

Должен быть в состоянии адаптировать это для большинства применений.