En HTML5, le type de saisie search apparaît avec un petit X à droite qui effacera la zone de texte (du moins dans Chrome, peut-être 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 boîte ou en effectuant une sorte de détection de clic d'emplacement (position x / y-position)?
Réponses
Trop de publicités?
En fait, il y a une "recherche" de l'événement est déclenché lorsque l'utilisateur effectue une recherche, ou lorsque l'utilisateur clique sur le "x". Ceci est particulièrement utile parce qu'elle comprend le "surplus" de l'attribut.
Maintenant, cela étant dit, je ne suis pas sûr si vous pouvez dire la différence entre cliquant sur le "x" et de la recherche, à moins d'utiliser un "onclick" hack". De toute façon, nous espérons que cette aide.
Références:
Sharad Biradar
Points
141
Lorenzo Dematté
Points
3082
Je veux ajouter un "retard" de réponse, car j'ai du mal avec change, keyup et search aujourd'hui, et peut-être ce que j'ai trouvé à la fin, peut être utile pour les autres aussi.
En gros, j'ai une recherche comme type de panneau, et je voulais juste réagir correctement à la presse de la petite X (sous Chrome et Opera, FF n'est pas mise en œuvre), et claire un volet de contenu.
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 se sont séparés parce que je voulais vérifier quand et dans quelles circonstances, chacun a été appelé).
Il s'avère que google Chrome et Firefox réagissent différemment.
En particulier, Firefox friandises change "tout changement à l'entrée", tandis que Chrome traite comme "lorsque le focus est perdu ET que le contenu est changé".
Donc, sur Chrome le "panneau de mise à jour" de la fonction a été appelée une fois, sur FF deux fois pour chaque combinaison de touches (une en keyup, l'une en change)
En outre, la compensation sur le terrain avec le petit X (qui n'est pas présent sous FF) tiré de l' search événement sous Chrome: non keyup, n change.
La conclusion? Utiliser input à la place:
$(some-input).on("input", function() {
// update panel
}
Il fonctionne avec le même comportement sous tous les navigateurs que j'ai testé, réagissant à chaque changement dans la saisie de contenu (copier-coller avec la souris, l'auto-complétion et "X" inclus).
ggutenberg
Points
2282
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>
mVChr
Points
26738
Il ne semble pas que vous pouvez accéder à cet dans le navigateur. La recherche est un Webkit HTML wrapper pour le Cacao NSSearchField. Le bouton annuler semble être contenues dans le navigateur client code sans référence externe disponible à partir de l'emballage.
Sources:
- http://weblogs.mozillazine.org/hyatt/archives/2004_07.html#005890
- http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#text-state-and-search-state
- http://dev.w3.org/html5/markup/input.search.html#input.search
On dirait que vous aurez à le comprendre, à travers la position de la souris sur cliquez 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
}
});
