Bir "arama" HTML5 girişinin temizlendiğini nasıl tespit edersiniz?

Question 1

HTML5'te, searchgiriş türü sağda metin kutusunu temizleyecek küçük bir X ile görünür (en azından Chrome'da, belki diğerlerinde). Bu X'in Javascript veya jQuery'de tıklandığını tespit etmenin, örneğin kutuya tıklandığını algılamaktan veya bir tür konum tıklama algılaması yapmaktan (x konumu / y konumu) başka bir yolu var mı?

Question 2

Aslında, kullanıcı her arama yaptığında veya "x" işaretini tıkladığında tetiklenen bir "arama" olayı vardır. Bu özellikle yararlıdır çünkü "artımlı" özniteliği anlar.

Şimdi, bunu söyledikten sonra, bir "onclick" hack kullanmadığınız sürece "x" i tıklamak ile arama arasındaki farkı anlayıp anlamayacağından emin değilim. Her iki durumda da, umarım bu yardımcı olur.

Referanslar:

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

Question 3

searchArama kutusunu aşağıda verildiği gibi bağlayın

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

Question 4

Ben mücadele çünkü, bir "geç" cevabını eklemek istediğiniz change, keyupve searchbugün, belki ne de başkaları için faydalı olabilir sonunda buldum. Temel olarak, bir tür olarak arama panelim var ve sadece küçük X'in baskısına doğru tepki vermek istedim (Chrome ve Opera'da FF bunu uygulamıyor) ve sonuç olarak bir içerik bölmesini temizleyin.

Bu koda sahiptim:

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

(Her birinin ne zaman ve hangi koşullarda arandığını kontrol etmek istediğim için ayrıdırlar).

Chrome ve Firefox'un farklı tepki verdiği ortaya çıktı. Özellikle, Firefox change"girdideki her değişiklik" olarak davranırken, Chrome bunu "odak kaybolduğunda VE içerik değiştiğinde" olarak değerlendirir. Bu nedenle, Chrome'da "güncelleme paneli" işlevi bir kez, FF'de her tuş vuruşu için iki kez (biri giriş keyup, biri giriş change) çağrıldı

Ek olarak, alanı küçük X ile temizlemek (FF altında bulunmayan) searcholayı Chrome altında tetikledi: hayır keyup, hayır change.

Sonuç? inputBunun yerine kullanın :

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

Test ettiğim tüm tarayıcılarda aynı davranışla çalışıyor, giriş içeriğindeki her değişikliğe tepki veriyor (fare ile kopyala-yapıştır, otomatik tamamlama ve "X" dahil).

Question 5

Pauan'ın cevabını kullanarak, çoğunlukla mümkün. Örn.

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

Question 6

Bunun eski bir soru olduğunu biliyorum, ama ben de benzer şeyi arıyordum. Arama kutusunu temizlemek için "X" işaretinin ne zaman tıklandığını belirleyin. Buradaki cevapların hiçbiri bana hiç yardımcı olmadı. Biri yakındı, ancak kullanıcı 'enter' düğmesine bastığında da etkilendi, 'X'i tıklamakla aynı sonucu tetikliyordu.

Bu yanıtı başka bir gönderide buldum ve benim için mükemmel çalışıyor ve yalnızca kullanıcı arama kutusunu temizlediğinde tetikleniyor.

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

Question 7

X işaretini tıklamanın bir değişiklik olayı olarak sayılması bana mantıklı geldi. Yapmasını istediğim şeyi yapmak için onChange olayının tüm kurulumuna zaten sahiptim. Bu yüzden benim için düzeltme, bu jQuery satırını yapmaktı:

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

Question 8

Görünüşe göre buna tarayıcıdan erişebilirsin. Arama girişi, Cocoa NSSearchField için bir Webkit HTML sarmalayıcısıdır. İptal düğmesi, sarmalayıcıdan hiçbir harici referans olmadan tarayıcı istemci kodunda yer alıyor gibi görünüyor.

Kaynaklar:

Görünüşe göre bunu, tıklandığında fare konumu ile aşağıdaki gibi bir şeyle anlamanız gerekecek:

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

Question 9

Tam Çözüm burada

Bu, arama x tıklandığında aramayı temizleyecektir. veya kullanıcı enter tuşuna bastığında arama api isabetini çağırır. bu kod, ek esc keyup olay eşleştirici ile daha da genişletilebilir. ama bu hepsini yapmalı.

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

Şerefe.

Question 10

İşte bunu başarmanın bir yolu. HTML'nize artımlı öznitelik eklemeniz gerekir, aksi takdirde çalışmaz.

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>

Snippet'i genişlet

Question 11

Bu yazıyı buldum ve biraz eski olduğunu fark ettim ama sanırım bir cevabım olabilir. Bu, çarpıya tıklama, geri alma ve ESC tuşuna basma işlemlerini gerçekleştirir. Eminim muhtemelen daha iyi yazılabilir - hala javascript konusunda nispeten yeniyim. İşte sonunda yaptığım şey - jQuery kullanıyorum (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 = "";
    }
  });
});

Question 12

Arama veya onclick çalışıyor ... ancak bulduğum sorun eski tarayıcılarla ilgiliydi - arama başarısız oluyor. Pek çok eklenti (jquery ui otomatik tamamlama veya fantezi ağaç filtresi) bulanıklık ve odak işleyicilerine sahiptir. Bunu bir otomatik tamamlama giriş kutusuna eklemek benim için çalıştı (değerlendirmek daha hızlı olduğu için this.value == "" kullanıldı). Daha sonra bulanıklık, küçük "x" işaretine bastığınızda imleci kutuda tuttu.

PropertyChange ve giriş hem IE 10 hem de IE 8 ve diğer tarayıcılarda çalıştı:

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

FancyTree filtre uzantısı için, bir sıfırlama düğmesi kullanabilir ve aşağıdaki gibi tıklama olayını zorlayabilirsiniz:

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

Bunu çoğu kullanım için uyarlayabilmelidir.

Question 13

Bunu dene, umarım sana yardım eder

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

Question 14

SADECE x tıklandığında tetiklenen tek yanıtın bu olduğuna inanıyorum.

Ancak, biraz hantal ve ggutenberg'in cevabı çoğu insan için işe yarayacak.

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

Girişiniz '#search-field'için jQuery seçicisi nerede . 'input[type=search]'Tüm arama girişlerini seçmek için kullanın . Alana tıkladıktan hemen sonra bir arama olayını (Pauan'ın cevabı) kontrol ederek çalışır.

Question 15

js'nin olay döngüsüne bağlı olarak click, açık temizleme düğmesi giriştesearch olayı tetikleyecektir , bu nedenle aşağıdaki kod beklendiği gibi çalışacaktır:

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

Yukarıdaki kod, onclick olay bir rezervasyonu this._cleared = falseolay döngü, ancak olay olacak hep peşinden koşmakonsearch size kararlı bir şekilde kontrol edebilirsiniz, olay this._clearedkullanıcı sadece tıkladım belirlemek için durumu Xbir tetiklenir sonra düğme ve onsearcholayı.

Bu hemen hemen tüm koşullarda çalışabilir , yapıştırılan metin , artımlı özniteliğe sahiptir, ENTER / ESC tuşuna basma vb.

Question 16

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

Question 17

TextField çapraz düğmesi tıklandığında (X) onmousemove () ateşlenir, bu olayı herhangi bir işlevi çağırmak için kullanabiliriz.

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