Bagaimana Anda mendeteksi pembersihan input "pencarian" HTML5?

154

Di HTML5, searchtipe input muncul dengan sedikit X di sebelah kanan yang akan menghapus kotak teks (setidaknya di Chrome, mungkin yang lain). Apakah ada cara untuk mendeteksi kapan X ini diklik dalam Javascript atau jQuery selain dari, katakanlah, mendeteksi ketika kotak diklik sama sekali atau melakukan semacam pendeteksian lokasi (posisi-x / posisi-y)?

javascript jquery html events dom-events Jason
sumber

Saya tidak tahu banyak tentang HTML 5, tetapi tidakkah ada onchangeacara?

Pekka

1

Nah, Anda bisa mencari tahu apakah kotak pencarian dihapus seperti itu, tetapi tidak apakah itu terjadi karena mengklik tombol itu vs seleksi dan penghapusan

mVChr

kemungkinan rangkap dua Apakah ada acara yang tersedia untuk opsi reset untuk pencarian input?

Naftali alias Neal

Kemungkinan jawab stackoverflow.com/a/59389615/11973798 periksa apakah itu membantu

Shubham Khare

Anda harus menambahkan keyup dan mencari acara ..

Burak Öztürk

104

Sebenarnya, ada acara "pencarian" yang dipecat setiap kali pengguna mencari, atau ketika pengguna mengklik "x". Ini sangat berguna karena ia memahami atribut "tambahan".

Sekarang, setelah mengatakan itu, saya tidak yakin apakah Anda dapat mengetahui perbedaan antara mengklik "x" dan mencari, kecuali jika Anda menggunakan hack "onclick". Either way, semoga ini membantu.

Referensi:

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

Pauan
sumber

2

Terima kasih, tidak dapat mengetahui kapan searchacara terjadi selain ketika Anda mengklik 'x'. Tampaknya tidak menyala keyup, bluratau ketika formulir itu dikirimkan. Tetapi ini layak untuk ditandai sebagai jawaban.

Maksim Vi.

4

The searchevent harus api bila pengguna menekan Enter. Dan jika kotak pencarian memiliki incrementalatribut, itu juga akan menyala ketika pengguna berhenti mengetik sebentar.

Pauan

6

FYI: pada saat penulisan komentar ini, ini hanya berfungsi di Chrome.

Jason

4

IE11 memicu inputacara tetapi bukan searchacara tersebut.

Joseph Lennox

1

Acara "pencarian" tidak standar. Lihat ini . Saya tidak akan merekomendasikan itu digunakan tanpa poly-fill.

rstackhouse

59

Bind search-mencegah kotak pencarian seperti yang diberikan di bawah ini-

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

Sharad Biradar
sumber

1

Ini adalah jawaban yang tepat untuk mereka yang tidak yakin

Erik Grosskurth

6

baik untuk mengetahui ada acara pencarian yang didukung di Chrome, tetapi tidak didukung di IE atau FF dan menurut MDN fitur non-standar dan tidak di jalur standar. developer.mozilla.org/en-US/docs/Web/Events/search

Rich Finelli

50

Saya ingin menambahkan jawaban "terlambat", karena saya berjuang dengan change, keyupdan searchhari ini, dan mungkin apa yang saya temukan pada akhirnya mungkin berguna bagi orang lain juga. Pada dasarnya, saya memiliki panel search-as-type, dan saya hanya ingin bereaksi dengan baik terhadap pers X kecil (di bawah Chrome dan Opera, FF tidak mengimplementasikannya), dan menghapus panel konten sebagai hasilnya.

Saya punya kode ini:

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

(Mereka terpisah karena saya ingin memeriksa kapan dan dalam keadaan apa masing-masing dipanggil).

Ternyata Chrome dan Firefox bereaksi secara berbeda. Secara khusus, Firefox memperlakukan changesebagai "setiap perubahan pada input", sementara Chrome memperlakukannya sebagai "ketika fokus hilang DAN konten berubah". Jadi, di Chrome, fungsi "panel pembaruan" dipanggil sekali, pada FF dua kali untuk setiap penekanan tombol (satu masuk keyup, satu masuk change)

Selain itu, membersihkan bidang dengan X kecil (yang tidak ada di bawah FF) meluncurkan searchacara di bawah Chrome: tidak keyup, tidak change.

Kesimpulannya? Gunakan inputsebaliknya:

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

Ini bekerja dengan perilaku yang sama di bawah semua browser yang saya uji, bereaksi pada setiap perubahan konten input (salin-tempel dengan mouse, pelengkapan otomatis dan "X" termasuk).

Lorenzo Dematté
sumber

1

Terima kasih Lorenzo ... ini sangat membantu.

Sterling Bourne

2

Luar biasa, cukup luar biasa. Banyak terima kasih menyelamatkan saya waktu mencoba mencari yang satu ini.

user2029541

Sepertinya Firefox mengubah perilakunya sejak? Saya menguji dengan Firefox 42.0 dan memperlakukan changeacara seperti Chrome, hanya menembak pada Enter atau fokus hilang.

Suzana

Saya suka opsi input on ... bagus!

Cam Tullos

14

Menggunakan tanggapan Pauan, itu sangat mungkin. 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
sumber

5

Bagi saya, changeacara ini tidak akan berlangsung sampai blurpada dasarnya. Cukup mengklik bagian (x)dalam bidang pencarian Chrome sepertinya tidak memecat saya. Setelah penyelidikan lebih lanjut (dan membaca komentar di bawah) saya mulai clickbekerja untuk saya. Begitu $("input[type='search']").bind('click', function(e) { if ( this.value=="") {//this just cleared!} });berhasil pada akhir saya

Jannis

2

Tetapi $("input[type='search']").bind('click', function(e) { if ( this.value=="") {//this just cleared!} });juga akan memicu ketika pengguna mengklik ke kolom input.

Scott

8

Saya tahu ini adalah pertanyaan lama, tetapi saya mencari hal yang sama. Tentukan kapan 'X' diklik untuk menghapus kotak pencarian. Tidak ada jawaban di sini yang membantu saya sama sekali. Satu dekat tetapi juga terpengaruh ketika pengguna menekan tombol 'enter', itu akan memecat hasil yang sama seperti mengklik 'X'.

Saya menemukan jawaban ini di pos lain dan berfungsi sempurna untuk saya dan hanya menyala saat pengguna menghapus kotak pencarian.

$("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
sumber

5

Masuk akal bagi saya bahwa mengklik X harus dianggap sebagai peristiwa perubahan. Saya sudah menyiapkan semua aktivitas onChange untuk melakukan apa yang saya perlukan. Jadi bagi saya, perbaikannya adalah dengan hanya melakukan baris jQuery ini:

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

Cory Gagliardi
sumber

Jika Anda ingin ini memicu ketika tombol hapus ditekan, Anda juga dapat menambahkan tanda centang untuk nilai input, komentar ala Jannis di bawah ini: stackoverflow.com/questions/2977023/… if (this.value === "") { ... }

Sam

4

Sepertinya Anda tidak dapat mengakses ini di browser. Input pencarian adalah pembungkus HTML Webkit untuk Cocoa NSSearchField. Tombol batal tampaknya terkandung dalam kode klien browser tanpa referensi eksternal yang tersedia dari bungkusnya.

Sumber:

Sepertinya Anda harus mengetahuinya melalui posisi mouse di klik dengan sesuatu seperti:

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

yah, itu menyebalkan. mungkin saya akan pergi dengan paket B, yang menjalankan event onClick jika inputnya sekarang kosong ... mungkin menaruhnya di timer 25ms

Jason

@Jason ya, dan Anda dapat menggunakan kode yang saya letakkan di atas untuk hanya menjalankannya jika klik terjadi di area tempat X berada. Itu selain memeriksa apakah input kosong seperti yang Anda katakan sudah mencukupi

mVChr

1

Menemukan posting ini dan saya menyadari ini agak lama, tetapi saya pikir saya mungkin punya jawaban. Ini menangani klik pada salib, mundur dan menekan tombol ESC. Saya yakin itu mungkin bisa ditulis lebih baik - saya masih relatif baru untuk javascript. Inilah yang akhirnya saya lakukan - Saya menggunakan 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
sumber

Sepertinya filterVal tidak didefinisikan

dlsso

1

coba ini, semoga membantu anda

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

Don Zanurano
sumber

1

Saya percaya ini adalah satu-satunya jawaban yang menyala HANYA ketika x diklik.

Namun, ini agak sedikit meretas dan jawaban ggutenberg akan bekerja untuk kebanyakan orang.

$('#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);
});

Di mana '#search-field'pemilih jQuery untuk input Anda. Gunakan 'input[type=search]'untuk memilih semua input pencarian. Bekerja dengan memeriksa acara pencarian (jawaban Pauan) segera setelah klik pada bidang.

dlsso
sumber

1

Solusi Lengkap ada di sini

Ini akan menghapus pencarian ketika pencarian x diklik. atau akan memanggil api pencarian hit ketika pengguna menekan enter. kode ini dapat diperpanjang dengan pencocokan event esc keyup tambahan. tetapi ini harus melakukan semuanya.

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

Bersulang.

Tarandeep Singh
sumber

1

berdasarkan pada event-loop dari js, tombol clickon clear akan memicu searchevent pada input , jadi kode di bawah ini akan berfungsi seperti yang diharapkan:

input.onclick = function(e){
  this._cleared = true
  setTimeout(()=>{
    this._cleared = false
  })
}
input.onsearch = function(e){
  if(this._cleared) {
    console.log('clear button clicked!')
  }
}

Kode di atas, onclick event membukukan this._cleared = falseloop acara, tapi acara akan selalu berjalan setelah itu onsearchacara, sehingga Anda secara stabil dapat memeriksa this._clearedstatus menentukan apakah pengguna hanya mengklik Xtombol dan kemudian memicu onsearchperistiwa.

Ini dapat bekerja pada hampir semua kondisi , teks yang disisipkan , memiliki atribut tambahan , tekan tombol ENTER / ESC dll.

James Yang
sumber

1

Inilah salah satu cara untuk mencapai ini. Anda perlu menambahkan atribut tambahan ke html Anda atau itu tidak akan berfungsi.

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>

Luaskan cuplikan

Revanth
sumber

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
sumber

0

Pencarian atau klik berhasil ... tetapi masalah yang saya temukan adalah dengan browser yang lebih lama - pencarian gagal. Banyak plugin (jquery ui autocomplete atau fancytree filter) memiliki blur dan penangan fokus. Menambahkan ini ke kotak input autocomplete bekerja untuk saya (digunakan this.value == "" karena lebih cepat untuk mengevaluasi). Kekaburan lalu fokus menjaga kursor di dalam kotak ketika Anda menekan sedikit 'x'.

PropertyChange dan input berfungsi untuk IE 10 dan IE 8 serta browser lainnya:

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

Untuk ekstensi filter FancyTree, Anda dapat menggunakan tombol reset dan memaksa acara klik itu sebagai berikut:

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

Harus dapat mengadaptasi ini untuk sebagian besar kegunaan.

Richard Dufour
sumber

-2

Pada klik tombol TextField cross (X) onmousemove () dipecat, kita dapat menggunakan acara ini untuk memanggil fungsi apa pun.

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

priyaranjan sahoo
sumber

Bagaimana Anda mendeteksi pembersihan input "pencarian" HTML5?

Jawaban:

Saya percaya ini adalah satu-satunya jawaban yang menyala HANYA ketika x diklik.