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

154

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

javascript jquery html events dom-events Джейсон
источник

Я не знаю много о HTML 5, но разве у него нет onchangeсобытия?

Пекка

1

Ну, вы могли бы выяснить, очищается ли окно поиска таким образом, но не

выяснилось,

возможный дубликат Есть ли какие-либо события для опции сброса для поиска ввода?

Нафтали ака Нил

Возможный ответ stackoverflow.com/a/59389615/11973798 проверить , поможет ли это

Shubham Кхару

Вы должны добавить keyup и поиск событий ..

Burak Öztürk

105

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

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

Ссылки:

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

Pauan
источник

2

Спасибо, не могу понять, когда searchсобытие происходит иначе, чем когда вы нажимаете на «х». Кажется, он не срабатывает keyup, blurили когда отправляется форма, в которой он находится. Но это заслуживает того, чтобы быть отмеченным как ответ.

Максим Ви.

4

searchСобытие должно срабатывать , когда пользователь нажимает клавишу Enter. И если у поля поиска есть incrementalатрибут, оно также сработает, когда пользователь перестанет печатать на секунду.

Pauan

6

К вашему сведению: на момент написания этого комментария это работает только в Chrome.

Джейсон

4

IE11 запускает inputсобытие, но не searchсобытие.

Джозеф Леннокс

1

Событие «поиск» нестандартно. Смотрите это . Я бы не рекомендовал его использовать без поли-заливки.

rstackhouse

59

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

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

Шарад Бирадар
источник

1

Это правильный ответ для тех, кто не уверен

Эрик Гроскурт

6

Приятно знать, что в Chrome поддерживается событие поиска, но не поддерживается в IE или FF, и, согласно MDN, это нестандартная функция, которая не соответствует стандартам. developer.mozilla.org/en-US/docs/Web/Events/search

Рич Файнелли

50

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

Лоренцо Дематте
источник

1

Спасибо, Лоренцо ... это было очень полезно.

Стерлинг Борн

2

Круто, просто потрясающе. Большое спасибо сэкономило мне время, пытаясь понять это.

user2029541

Кажется, что Firefox изменил свое поведение с тех пор? Я протестировал Firefox 42.0, и он обрабатывает changeсобытие так же, как Chrome, стреляя только по Enter или потерял фокус.

Suzana

Мне нравится опция ввода ... приятно!

Кэм

14

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

ggutenberg
источник

5

Для меня changeсобытие не начинается, пока в blurосновном. Простое нажатие (x)внутри поля поиска в Chrome не похоже на какое-либо событие для меня. После дальнейшего расследования (и прочтения комментариев ниже) я принялся clickза работу. Так $("input[type='search']").bind('click', function(e) { if ( this.value=="") {//this just cleared!} });работает на моем конце

Jannis

2

Но $("input[type='search']").bind('click', function(e) { if ( this.value=="") {//this just cleared!} });также срабатывает, когда пользователь щелкает в поле ввода.

Скотт

8

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

lostInTheTetons
источник

5

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

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

Кори Гальярди
источник

Если вы хотите, чтобы это срабатывало при нажатии кнопки очистки, вы также можете добавить проверку для значения ввода, аля комментарий Дженниса ниже: stackoverflow.com/questions/2977023/… if (this.value === "") { ... }

Сэм

4

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

mVChr
источник

хорошо, это отстой. может быть, я пойду с планом B, который запускал событие onClick, если вход теперь пуст ... может быть, поставить его на таймер 25 мс

Джейсон

@ Джейсон, да, и вы можете использовать код, который я поместил выше, чтобы запустить его, только если щелчок произошел в области, где находится X. Что в дополнение к проверке, если вход пуст, как вы сказали, должно быть достаточно

mVChr

1

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

ScottG
источник

Похоже, filterVal не определено

dlsso

1

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

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

Дон Занурано
источник

1

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

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

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

dlsso
источник

1

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

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

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

Тарандип Сингх
источник

1

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

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

Джеймс Ян
источник

1

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

Развернуть фрагмент

Revanth
источник

1

document.querySelectorAll('input[type=search]').forEach(function (input) {
   input.addEventListener('mouseup', function (e) {
                if (input.value.length > 0) {
                    setTimeout(function () {
                        if (input.value.length === 0) {
                            //do reset action here
                        }
                    }, 5);
                }
            });
}

ECMASCRIPT 2016

realmag777
источник

0

Поиск или 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);

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

Ричард Дюфур
источник

-2

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

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

приаранджан саху
источник

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

Ответы:

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