Як ви виявите очищення вхідного запиту HTML5?

154

У HTML5 searchтип введення відображається з невеликим X праворуч, що очистить текстове поле (принаймні в Chrome, можливо, інші). Чи є спосіб виявити, коли цей X натискається в Javascript або jQuery, окрім, скажімо, виявлення, коли клік клацається взагалі або роблять якесь визначення місця розташування клацання (x-position / y-position)?

— Джейсон
джерело

Я мало знаю про HTML 5, але чи не має він onchangeподії?

— Pekka

1

Ну, ви можете зрозуміти, чи очищено вікно пошуку таким чином, але чи не сталося це через натискання цієї кнопки проти вибору та видалення

— mVChr

можливий дублікат Чи доступні події для опції скидання для введення пошуку?

— Naftali aka Neal

Можлива відповідь stackoverflow.com/a/59389615/11973798 перевірити, чи допомагає це

— Shubham

вам слід додати події клавіатури та пошуку ..

— Burak Öztürk

104

Насправді, є подія "пошуку", яка запускається кожного разу, коли користувач здійснює пошук, або коли користувач натискає "x". Це особливо корисно, оскільки він розуміє атрибут "поступовий".

Тепер, сказавши це, я не впевнений, чи зможете ви сказати різницю між натисканням кнопки "x" та пошуком, якщо ви не використовуєте хак "onclick". Так чи інакше, сподіваємось, це допомагає.

Список літератури:

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

— Поан
джерело

2

Дякую, не можу зрозуміти, коли searchтрапляється подія, крім того, коли ви натискаєте на "x". Схоже, це не спрацьовує keyup, blurабо коли форма, в яку він подається. Але це заслуговує на позначення як відповідь.

— Максим Ві.

4

searchПодія має спрацьовувати , коли користувач натискає кнопку Enter. І якщо поле пошуку має incrementalатрибут, воно також запуститься, коли користувач перестане друкувати на секунду.

— Паан

6

FYI: на момент написання цього коментаря це працює лише в Chrome.

— Джейсон

4

IE11 запускає inputподію, але не searchподію.

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

1

Подія "пошуку" нестандартна. Дивіться це . Я б не рекомендував використовувати його без полів.

— rstackhouse

59

Bind search-Event вікна пошуку , як зазначено ціни нижче

$('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

— Rich Finelli

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

Дивовижний, просто приголомшливий. Велика подяка заощадила мені час, намагаючись зрозуміти це.

— користувач2029541

Здається, Firefox змінив свою поведінку з тих пір? Я тестував Firefox 42.0, і він трактує changeподію так само, як Chrome, стріляючи лише на Enter або втративши фокус.

— Сузана

Мені подобається варіант введення ... приємно!

— Cam Tullos

14

Використовуючи відповідь Поана, це здебільшого можливо. Вих.

<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", щоб очистити вікно пошуку. Жодна з відповідей тут мені зовсім не допомогла. Один був близьким, але також постраждав, коли користувач натиснув кнопку "ввести", це призведе до того ж результату, що і натискання кнопки "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(); });

— Кори Гальярді
джерело

Якщо ви хочете , щоб це спусковий гачок при натисканні кнопки ясно, ви можете також додати перевірку на значення сторін вихідного ала Jannis 'коментар нижче: stackoverflow.com/questions/2977023 / ... if (this.value === "") { ... }

— Sam

4

Схоже, ви можете отримати доступ до цього в браузері. Вхід для пошуку - це HTML-обгортка Webkit для какао 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 мс

— Джейсон

@Jason так, і ви можете використовувати код, який я ставлю вище, лише запустити його, якщо клацання відбулося в тій області, де знаходиться 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 = "";
    }
  });
});

— Скотт
джерело

Схоже, filterVal не визначений

— dlsso

1

спробуй це, сподіваюся, допоможе тобі

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

— Дон Занурано
джерело

1

Я вважаю, що це єдина відповідь, яка спрацьовує ТОЛЬКО при натисканні на кнопку 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]'для вибору всіх результатів пошуку. Працює, перевіряючи пошукову подію (відповідь Поана) відразу після натискання на поле.

— dlsso
джерело

1

Повне рішення тут

Це очистить пошук при натисканні на кнопку x. або зателефонує до пошукового запиту api, коли натисніть кнопку користувача. цей код можна додатково розширити за допомогою додаткового відповідника події клавіатури esc. але це має робити все.

document.getElementById("userSearch").addEventListener("search", 
function(event){
  if(event.type === "search"){
    if(event.currentTarget.value !== ""){
      hitSearchAjax(event.currentTarget.value);
    }else {
      clearSearchData();  
    }
  }
});

Ура.

— Тарандей Сінгх
джерело

1

на основі циклу подій js, clickкнопка очищення призведе до запуску 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 тощо.

— Джеймс Ян
джерело

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 == "" тому, що було швидше оцінити). Після цього розмиття фокус утримував курсор у полі, коли ви потрапили на маленький "x".

PropertyChange і введення працювали як для IE 10 і IE 8, так і для інших браузерів:

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

Для розширення фільтра FancyTree ви можете скористатися кнопкою скидання і примусити його натиснути наступним чином:

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

Після натискання перехресної кнопки (X) TextField onmousemove () звільняється, ми можемо використовувати цю подію для виклику будь-якої функції.

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

— priyaranjan sahoo
джерело