Подтвердить что ты не робот

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

Собственно, есть событие "поиска", которое запускается всякий раз, когда пользователь выполняет поиск, или когда пользователь нажимает "x". Это особенно полезно, потому что он понимает атрибут "incremental".

Теперь, сказав это, я не уверен, можете ли вы сказать разницу между нажатием "x" и поиском, если вы не используете "onclick" взломать. В любом случае, надеюсь, это поможет.

Литература:

http://help.dottoro.com/ljdvxmhr.php

Ответ 2

Привязать search - отобразить окно поиска, как показано ниже -

$('input[type=search]').on('search', function () {
    // search logic here
    // this function will be executed on click of X (clear button)
});

Ответ 3

Я хочу добавить "поздний" ответ, потому что сегодня я боролся с change, keyup и search, и, возможно, то, что я нашел в конце, может быть полезно и для других. В принципе, у меня есть панель типа "поиск по типу", и я просто хотел правильно отреагировать на прессу маленького X (в Chrome и Opera, FF не реализует его) и очистить панель контента в результате.

У меня был этот код:

 $(some-input).keyup(function() { 
    // update panel
 }
 $(some-input).change(function() { 
    // update panel
 }
 $(some-input).on("search", function() { 
    // update panel
 }

(Они отделены друг от друга, потому что я хотел проверить, когда и при каких обстоятельствах они были вызваны).

Оказывается, Chrome и Firefox реагируют по-разному. В частности, Firefox рассматривает change как "каждое изменение ввода", в то время как Chrome рассматривает его как "когда фокус потерян и содержимое изменено". Итак, в Chrome функция "панель обновления" вызывалась один раз, по FF два раза для каждого нажатия клавиши (один в keyup, один в change)

Кроме того, очистка поля небольшим X (которого нет в FF) вызывает событие search в Chrome: no keyup, no change.

Вывод? Вместо этого используйте input:

 $(some-input).on("input", function() { 
    // update panel
 }

Он работает с тем же самым поведением во всех проверенных вами браузерах, реагируя при каждом изменении входного содержимого (копирование с помощью мыши, автозаполнение и "X" включено).

Ответ 4

Используя ответ Pauan, это в основном возможно. Пример.

<head>
    <script type="text/javascript">
        function OnSearch(input) {
            if(input.value == "") {
                alert("You either clicked the X or you searched for nothing.");
            }
            else {
                alert("You searched for " + input.value);
            }
        }
    </script>
</head>
<body>
    Please specify the text you want to find and press ENTER!
    <input type="search" name="search" onsearch="OnSearch(this)"/>
</body>

Ответ 5

Кажется, что вы не можете получить доступ к этому в браузере. Вход для поиска - это оболочка Webkit HTML для Cocoa NSSearchField. Кнопка отмены, похоже, содержится в коде клиента браузера без внешней ссылки, доступной из обертки.

Источники:

Похоже, вам нужно будет понять это с помощью мыши, щелкнув что-то вроде:

$('input[type=search]').bind('click', function(e) {
  var $earch = $(this);
  var offset = $earch.offset();

  if (e.pageX > offset.left + $earch.width() - 16) { // X button 16px wide?
    // your code here
  }
});

Ответ 6

Мне показалось, что щелчок по X должен считаться событием изменения. У меня уже было событие onChange для всех, чтобы делать то, что мне нужно. Поэтому для меня исправить было просто сделать эту строку jQuery:

$('#search').click(function(){ $(this).change(); });

Ответ 7

Я знаю, что это старый вопрос, но я искал подобное. Определите, когда щелкнули "X", чтобы очистить окно поиска. Ни один из ответов здесь мне не помог. Один из них был близок, но также был затронут, когда пользователь нажал кнопку 'enter', он упустит тот же результат, что и нажатие кнопки "X".

Я нашел этот ответ на другом посту, и он отлично работает для меня и только срабатывает, когда пользователь очищает окно поиска.

$("input").bind("mouseup", function(e){
   var $input = $(this),
   oldValue = $input.val();

   if (oldValue == "") return;

   // When this event is fired after clicking on the clear button
   // the value is not cleared yet. We have to wait for it.
   setTimeout(function(){
     var newValue = $input.val();

      if (newValue == ""){
         // capture the clear
         $input.trigger("cleared");
      }
    }, 1);
});

Ответ 8

Нашел этот пост, и я понимаю, что он немного стар, но я думаю, что у меня может быть ответ. Это обрабатывает щелчок на крестике, обратную сторону и нажатие клавиши ESC. Я уверен, что это, вероятно, лучше написано - я все еще относительно новичок в javascript. Вот что я сделал - я использую jQuery (v1.6.4):

var searchVal = ""; //create a global var to capture the value in the search box, for comparison later
$(document).ready(function() {
  $("input[type=search]").keyup(function(e) {
    if (e.which == 27) {  // catch ESC key and clear input
      $(this).val('');
    }
    if (($(this).val() === "" && searchVal != "") || e.which == 27) {
      // do something
      searchVal = "";
    }
    searchVal = $(this).val();
  });
  $("input[type=search]").click(function() {
    if ($(this).val() != filterVal) {
      // do something
      searchVal = "";
    }
  });
});

Ответ 9

Здесь один из способов достижения этого. Вам нужно добавить инкрементный атрибут к вашему html или он не будет работать.

window.onload = function() {
  var tf = document.getElementById('textField');
  var button = document.getElementById('b');
  button.disabled = true;
  var onKeyChange = function textChange() {
    button.disabled = (tf.value === "") ? true : false;
  }
  tf.addEventListener('keyup', onKeyChange);
  tf.addEventListener('search', onKeyChange);

}
<input id="textField" type="search" placeholder="search" incremental="incremental">
<button id="b">Go!</button>

Ответ 10

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

Элемент PropertyChange и вход обрабатываются как для IE 10, так и для IE 8, а также для других браузеров:

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

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

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

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

Ответ 11

попробуйте это, надеюсь помочь вам

$("input[name=search-mini]").on("search", function() {
  //do something for search
});

Ответ 12

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

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

$('#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]', чтобы выбрать все поисковые входы. Выполняет проверку на событие поиска (ответ Pauan) сразу после щелчка по полю.

Ответ 13

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

Это очистит поиск при нажатии на поиск x. или вызовет поиск 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();  
    }
  }
});

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

Ответ 14

на основе цикла событий 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.

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

Ответ 15

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

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