web-dev-qa-db-fra.com

Comment détectez-vous l'effacement d'une entrée HTML5 de "recherche"?

En HTML5, le type d’entrée search apparaît avec un petit X à droite qui effacera la zone de texte (du moins dans Chrome, peut-être dans d’autres). Existe-t-il un moyen de détecter le moment où l'utilisateur clique sur cet X en javascript ou jQuery autrement que, par exemple, en détectant le clic de la case ou en effectuant une sorte de détection de clic d'emplacement (position x/y)?

javascriptjqueryeventsjavascript-eventshtml5
115
Jason

En réalité, un événement "search" est déclenché chaque fois que l'utilisateur effectue une recherche ou lorsque l'utilisateur clique sur le "x". Ceci est particulièrement utile car il comprend l'attribut "incrémental".

Cela dit, je ne suis pas sûr que vous puissiez faire la différence entre cliquer sur le "x" et rechercher, à moins d’utiliser un hack "onclick". Quoi qu'il en soit, cela aide, espérons-le.

Références:

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

84
Pauan

Bind search- event the search box comme indiqué ci-dessous-

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

Je souhaite ajouter une réponse "tardive", car j’ai eu de la difficulté avec change, keyup et search aujourd’hui, et peut-être que ce que j’ai trouvé à la fin pourrait être utile pour d’autres aussi . et je voulais juste réagir correctement à la presse du petit X (sous Chrome et Opera, FF ne l'implémentait pas), et effacer un volet de contenu en conséquence.

J'ai eu ce code:

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

(Ils sont séparés parce que je voulais vérifier quand et dans quelles circonstances chacun était appelé).

Il s'avère que Chrome et Firefox réagissent différemment. En particulier, Firefox traite change comme "chaque modification apportée à l'entrée", tandis que Chrome la traitait comme "en cas de perte du focus ET de modification du contenu" . Ainsi, sur Chrome, la fonction "panneau de mise à jour" était appelée une fois sur FF deux fois pour chaque frappe (une sur keyup, une sur change)

De plus, l'effacement du champ avec le petit X (qui n'est pas présent sous FF) a déclenché l'événement search sous Chrome: no keyup, no change.

La conclusion? Utilisez input à la place:

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

Cela fonctionne avec le même comportement sous tous les navigateurs que j'ai testés, réagissant à chaque changement du contenu en entrée (copier-coller avec la souris, complétion automatique et "X" inclus).

34
Lorenzo Dematté

En utilisant la réponse de Pauan, c'est surtout possible. 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>
14
ggutenberg

Il était logique pour moi que cliquer sur le X devrait compter comme un événement de changement. J'ai déjà eu l'événement onChange tout configuré pour faire ce que j'avais besoin de faire. Donc pour moi, le correctif consistait simplement à faire cette ligne jQuery:

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

5
Cory Gagliardi

Il ne semble pas que vous puissiez accéder à cela dans le navigateur. L'entrée de recherche est un wrapper HTML Webkit pour le Cocoa NSSearchField. Le bouton d'annulation semble être contenu dans le code client du navigateur, sans référence externe disponible à partir du wrapper.

Sources:

Il semblerait que vous deviez comprendre la position de la souris sur un clic avec quelque chose comme:

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

Je sais que c'est une vieille question, mais je cherchais la même chose. Déterminez quand le «X» a été cliqué pour vider le champ de recherche. Aucune des réponses ici ne m'a aidé du tout. L'un était proche mais était également affecté lorsque l'utilisateur cliquait sur le bouton "entrer"; le résultat était identique à celui d'un clic sur "X".

J'ai trouvé cette réponse sur un autre message et cela fonctionne parfaitement pour moi et ne se déclenche que lorsque l'utilisateur efface le champ de recherche.

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

Voici un moyen d'y parvenir. Vous devez ajouter un attribut incrémental à votre code HTML, sinon cela ne fonctionnera pas.

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>

1
Revanth

J'ai trouvé cet article et je me rends compte qu'il est un peu vieux, mais je pense je pourrais avoir une réponse. Cela gère le clic sur la croix, l'espacement arrière et la frappe sur la touche Échap. Je suis sûr que cela pourrait probablement être mieux écrit - je suis encore relativement nouveau en javascript. Voici ce que j'ai fini par faire - J'utilise 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 = "";
    }
  });
});
1
ScottG

La solution complète est ici

Cela effacera la recherche lorsque vous cliquerez sur la recherche x. ou appellera la recherche api hit lorsque l'utilisateur appuiera sur entrée. ce code peut encore être étendu avec un accessoire d’affichage des événements keyup supplémentaire. mais cela devrait tout faire. 

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

À votre santé.

0
Tarandeep Singh

La recherche ou onclick fonctionne ... mais le problème que j'ai découvert concernait les anciens navigateurs: la recherche échoue. Beaucoup de plugins (jquery ui autocomplete ou fancytree filter) ont des gestionnaires de flou et de mise au point. Ajouter ceci à une boîte de saisie à complétion automatique a fonctionné pour moi (utilisé this.value == "" car il était plus rapide à évaluer). Le flou puis la mise au point gardaient le curseur dans la case lorsque vous frappiez le petit «x». 

Le PropertyChange et l'entrée ont fonctionné pour IE 10 et IE 8 ainsi que pour d'autres navigateurs:

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

Pour l'extension de filtre FancyTree, vous pouvez utiliser un bouton de réinitialisation et forcer son événement de clic comme suit:

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

Devrait être capable de l'adapter à la plupart des utilisations.

0
Richard Dufour

basé sur la boucle d'événement de js, le bouton click on clear déclenchera l'événement search sur entrée, donc le code ci-dessous fonctionnera comme prévu:

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

Le code ci-dessus, onclick event a réservé une boucle d'événement this._cleared = false, mais l'événement sera toujours exécuté après l'événement onsearch, afin que vous puissiez vérifier de manière stable le statut this._cleared pour déterminer si l'utilisateur a simplement cliqué X et a ensuite déclenché un événement onsearch.

Cela peut fonctionner sur presque toutes conditions, texte collé, possède l'attribut incrémental, la touche ENTER/ESC, etc.

0
James Yang

Je crois que c'est la seule réponse qui se déclenche UNIQUEMENT lorsque l'utilisateur clique sur x.

Cependant, c'est un peu hacky et la réponse de ggutenberg fonctionnera pour la plupart des gens.

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

Où '#search-field' est le sélecteur jQuery pour votre entrée. Utilisez 'input[type=search]' pour sélectionner toutes les entrées de recherche. Fonctionne en recherchant un événement de recherche (réponse de Pauan) immédiatement après un clic sur le champ.

0
dlsso

essayez ceci, j'espère vous aider

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