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

<p>на самом деле, существует событие «поиск», которое запускается всякий раз, когда пользователь выполняет поиск, или когда пользователь нажимает «x». это особенно полезно, потому что он понимает атрибут «добавочный».</p><p>сказав это, я не уверен, что вы сможете определить разницу между нажатием «x» и поиском, если только вы не используете хак «onclick». в любом случае, надеюсь, это поможет.</p><blockquote> <p>рекомендации:</p> <p> <a href="http://help.dottoro.com/ljdvxmhr.php">http://help.dottoro.com/ljdvxmhr.php</a> </p> </blockquote>

<p>bind <code>search</code>- если окно поиска указано ниже</p><pre><code>$('input[type=search]').on('search', function () { // search logic here // this function will be executed on click of x (clear button) }); 

я хочу добавить «поздний» ответ, потому что я боролся с 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 } </code></pre><p>(они раздельные, потому что я хотел проверить, когда и при каких обстоятельствах каждый был вызван).</p><p>оказывается, chrome и firefox реагируют по-разному. в частности, firefox рассматривает <code>change</code> как «каждое изменение ввода», в то время как chrome обрабатывает его как «при потере фокуса и изменении содержимого» . таким образом, в chrome была вызвана функция «панель обновления» один раз, в ff дважды для каждого нажатия клавиши (один в <code>keyup</code>, один в <code>change</code>)</p><p>кроме того, очистка поля с маленьким знаком x (которого нет в ff) вызвала событие <code>search</code> в chrome: нет <code>keyup</code>, нет <code>change</code>.</p><p>вывод? вместо этого используйте <code>input</code>:</p><pre><code> $(some-input).on("input", function() { // update panel } он работает с одинаковым поведением во всех протестированных мною браузерах, реагируя на каждое изменение входного содержимого (копирование-вставка с помощью мыши, автозаполнения и «x»).

для меня имело смысл, что нажатие на x должно считаться событием изменения. я уже настроил событие onchange, чтобы сделать то, что мне было нужно. поэтому для меня исправление состояло в том, чтобы просто сделать эту строку jquery: $('#search').click(function(){ $(this).change(); }); 

похоже, вы не можете получить доступ к этому в браузере. в качестве входных данных для поиска используется html-оболочка webkit для cocoa nssearchfield. кажется, кнопка отмены содержится в клиентском коде браузера, и внешняя ссылка не доступна из оболочки.источники:<br/>  <a href="http://weblogs.mozillazine.org/hyatt/archives/2004_07.html#005890">http://weblogs.mozillazine.org/hyatt/archives/2004_07.html#005890   <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#text-state-and-search-state">http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#text-state-and-search-state   <a href="http://dev.w3.org/html5/markup/input.search.html#input.search">http://dev.w3.org/html5/markup/input.search.html#input.search  похоже, вам придется выяснить это с помощью позиции мыши при нажатии на что-то вроде:$('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 } }); </code></pre>

<p>я знаю, что это старый вопрос, но я искал подобное. определите, когда была нажата кнопка «x», чтобы очистить окно поиска. ни один из ответов здесь не помог мне вообще. один из них был близок, но на него также влияло, когда пользователь нажимал кнопку «ввод», он получал тот же результат, что и нажатие «х».</p><p>я нашел этот ответ в другом посте, и он отлично работает для меня и срабатывает только тогда, когда пользователь очищает окно поиска.</p><pre><code>$("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); }); </code></pre>

<p>вот один из способов достижения этого. вам нужно добавить инкрементный атрибут в ваш html, иначе он не будет работать.</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>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); }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><input id="textfield" type="search" placeholder="search" incremental="incremental"> <button id="b">go!</button></code></pre> </div> </div> </p>

<p><strong> полное решение здесь </strong></p><p>это очистит поиск при нажатии кнопки поиска x. или вызовет хит поискового api, когда пользователь нажмет enter. этот код может быть расширен с помощью дополнительного средства сопоставления событий esc keyup. но это должно делать все это. </p><pre><code>document.getelementbyid("usersearch").addeventlistener("search", function(event){ if(event.type === "search"){ if(event.currenttarget.value !== ""){ hitsearchajax(event.currenttarget.value); }else { clearsearchdata(); } } }); </code></pre><p>приветствия.</p>

<p>поиск или onclick работает ... но проблема, которую я обнаружил, была со старыми браузерами - поиск не удался. у многих плагинов (автозаполнение jquery ui или фильтр фантазии) есть обработчики размытия и фокуса. добавление этого в поле ввода автозаполнения работало для меня (использовало this.value == "", потому что это было быстрее для оценки). размытие и фокусировка удерживали курсор в поле, когда вы нажимаете маленькую «х». </p><p>propertychange и ввод работали как для ie 10 и ie 8, так и для других браузеров:</p><pre><code>$("#inputid").on("propertychange input", function(e) { if (this.value == "") $(this).blur().focus(); }); </code></pre><p>для расширения фильтра fancytree вы можете использовать кнопку сброса и вызвать событие click следующим образом:</p><pre><code>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); </code></pre><p>должен быть в состоянии адаптировать это для большинства применений.</p>

<p>основываясь на цикле событий js, кнопка <code>click</code> on clear будет запускать событие <code>search</code> при<strong> input </strong>, поэтому приведенный ниже код будет работать как положено:</p><pre><code>input.onclick = function(e){ this.\_cleared = true settimeout(()=>{ this.\_cleared = false }) } input.onsearch = function(e){ if(this.\_cleared) { console.log('clear button clicked!') } } </code></pre><p>приведенный выше код,<strong> onclick </strong>событие, зарезервировало цикл события <code>this.\_cleared = false</code>, но событие будет<strong> всегда запускаться после </strong>события <code>onsearch</code>, поэтому вы можете стабильно проверять состояние <code>this.\_cleared</code>, чтобы определить, нажал ли пользователь кнопку <code>x</code>, а затем вызвал событие <code>onsearch</code>.</p><p>это может работать почти<strong> во всех условиях </strong>, <em>вставленный текст</em>, имеет атрибут <em>incremental</em>, нажатие клавиши <em>enter/esc</em> и т.д.</p>

<h3>я считаю, что это единственный ответ, который срабатывает только при нажатии на х.</h3><p>тем не менее, это немного глупо, и ответ ггутенберга будет работать для большинства людей.</p><pre><code>$('#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]' для выбора всех входных данных поиска. работает, проверяя поиск события (ответ пауана) сразу после нажатия на поле.

попробуй это, надеюсь тебе поможет$("input[name=search-mini]").on("search", function() { //do something for search }); </code></pre>