it-swarm.com.ru

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

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

115
Jason

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

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

Рекомендации:

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

84
Pauan

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

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

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

34
Lorenzo Dematté

Используя ответ Пауана, это в основном возможно. 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>
14
ggutenberg

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

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

5
Cory Gagliardi

Похоже, вы не можете получить доступ к этому в браузере. В качестве входных данных для поиска используется 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
  }
});
4
mVChr

Я знаю, что это старый вопрос, но я искал подобное. Определите, когда была нажата кнопка «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);
});
3
lostInTheTetons

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

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

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

Это очистит поиск при нажатии кнопки поиска 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();  
    }
  }
});

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

0
Tarandeep Singh

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

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

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

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

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

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

0
Richard Dufour

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

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 и т.д.

0
James Yang

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

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

$('#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]' для выбора всех входных данных поиска. Работает, проверяя поиск события (ответ Пауана) сразу после нажатия на поле.

0
dlsso

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

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