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

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

125 голосов
/ 04 июня 2010

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

Ответы [ 15 ]

87 голосов
/ 16 сентября 2010

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

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

Ссылки:

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

45 голосов
/ 27 февраля 2013

Bind search -все поле поиска, как показано ниже- 

$('input[type=search]').on('search', function () {
    // search logic here
    // this function will be executed on click of X (clear button)
});
38 голосов
/ 29 августа 2014

Я хочу добавить «поздний» ответ, потому что я боролся с 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: нет keyup, нет change.

Заключение? Используйте input вместо: 

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

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

14 голосов
/ 17 октября 2010

Используя ответ Пауана, это в основном возможно. Ex. 

<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 голосов
/ 18 ноября 2010

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

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

4 голосов
/ 10 мая 2017

Я знаю, что это старый вопрос, но я искал похожую вещь.Определите, когда была нажата кнопка «X», чтобы очистить окно поиска.Ни один из ответов здесь не помог мне вообще.Один из них был близок, но также был затронут, когда пользователь нажимал кнопку «Ввод», он вызывал тот же результат, что и нажатие «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);
});
4 голосов
/ 05 июня 2010

Не похоже, что вы можете получить доступ к этому в браузере. Вводимые данные для поиска представляют собой оболочку HTML Webkit для 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
  }
});
1 голос
/ 28 октября 2017

Вот один из способов достижения этого. Вам необходимо добавить инкрементный атрибут в ваш 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>
1 голос
/ 23 декабря 2015

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

$("input[name=search-mini]").on("search", function() {
  //do something for search
});
1 голос
/ 19 июля 2012

Нашел этот пост, и я понимаю, что он немного староват, но я думаю У меня может быть ответ.Это обрабатывает щелчок по кресту, возврат и нажатие клавиши 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 = "";
    }
  });
});
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...