In HTML5 wird der Eingabetyp search
mit einem kleinen X auf der rechten Seite angezeigt, durch den das Textfeld gelöscht wird (zumindest in Chrome, möglicherweise auch anderen). Gibt es eine Möglichkeit zu erkennen, wann dieses X in Javascript oder jQuery angeklickt wird, mit anderen Worten, als zu erkennen, wann das Kästchen überhaupt angeklickt wird, oder indem Sie eine bestimmte Art von Klickerkennung (x-Position/y-Position) ausführen?
Tatsächlich gibt es ein "Suche" -Ereignis, das ausgelöst wird, wenn der Benutzer sucht oder wenn der Benutzer auf das "x" klickt. Dies ist besonders nützlich, da es das Attribut "inkrementell" versteht.
Ich bin mir jedoch nicht sicher, ob Sie den Unterschied zwischen dem Klicken auf "x" und dem Suchen erkennen können, es sei denn, Sie verwenden einen "Onclick" - Hack. So oder so, hoffentlich hilft das.
Verweise:
Bind search
- event das Suchfeld wie unten angegeben-
$('input[type=search]').on('search', function () {
// search logic here
// this function will be executed on click of X (clear button)
});
Ich möchte eine "späte" Antwort hinzufügen, weil ich heute mit change
, keyup
und search
zu kämpfen habe, und vielleicht kann das, was ich am Ende gefunden habe, auch für andere nützlich sein , und ich wollte nur richtig auf das Drücken des kleinen X (unter Chrome und Opera, FF implementiert es nicht) reagieren und als Ergebnis einen Inhaltsbereich löschen.
Ich hatte diesen Code:
$(some-input).keyup(function() {
// update panel
}
$(some-input).change(function() {
// update panel
}
$(some-input).on("search", function() {
// update panel
}
(Sie sind getrennt, weil ich überprüfen wollte, wann und unter welchen Umständen jeder aufgerufen wurde).
Es stellt sich heraus, dass Chrome und Firefox unterschiedlich reagieren. Insbesondere behandelt Firefox change
als "jede Änderung an der Eingabe", während Chrome dies als "Wenn der Fokus verloren geht UND der Inhalt geändert wird" ..__ behandelt. Daher wurde in Chrome die Funktion "Aktualisierungsfenster" aufgerufen einmal, einmal FF für jeden Tastendruck (einer in keyup
, einer in change
)
Das Löschen des Felds mit dem kleinen X (das unter FF nicht vorhanden ist) löste außerdem das Ereignis search
unter Chrome aus: no keyup
, no change
.
Die Schlussfolgerung? Verwenden Sie stattdessen input
:
$(some-input).on("input", function() {
// update panel
}
Es funktioniert unter allen getesteten Browsern mit demselben Verhalten und reagiert auf jede Änderung des Eingabeinhalts (Kopieren und Einfügen mit der Maus, Autovervollständigung und "X").
Mit Pauans Antwort ist es meist möglich. 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>
Es machte für mich Sinn, dass das Klicken auf das X als Änderungsereignis gelten sollte. Ich hatte bereits das onChange-Event eingerichtet, um das zu tun, was ich brauchte. Für mich bestand die Lösung darin, einfach diese jQuery-Zeile auszuführen:
$('#search').click(function(){ $(this).change(); });
Es scheint nicht, dass Sie im Browser darauf zugreifen können. Die Sucheingabe ist ein Webkit-HTML-Wrapper für das Cocoa NSSearchField. Die Schaltfläche "Abbrechen" scheint im Browser-Clientcode enthalten zu sein, ohne dass eine externe Referenz vom Wrapper verfügbar ist.
Quellen:
Sieht so aus, als müssten Sie es durch Mausposition beim Klicken herausfinden:
$('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
}
});
Ich weiß, dass dies eine alte Frage ist, aber ich habe nach ähnlichem gesucht. Bestimmen Sie, wann das 'X' angeklickt wurde, um das Suchfeld zu löschen. Keine der Antworten hier hat mir geholfen. Einer war in der Nähe, aber auch betroffen, wenn der Benutzer die Eingabetaste drückte, er würde dasselbe Ergebnis auslösen wie das Klicken auf das X.
Ich habe diese Antwort in einem anderen Beitrag gefunden und funktioniert perfekt für mich und wird nur ausgelöst, wenn der Benutzer das Suchfeld deaktiviert.
$("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);
});
Hier ist eine Möglichkeit, dies zu erreichen. Sie müssen inkrementelle Attribute zu Ihrer HTML-Datei hinzufügen, sonst funktioniert es nicht.
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>
Fand diesen Beitrag und mir ist klar, dass er ein bisschen alt ist, aber ich denke Ich könnte eine Antwort haben. Dies behandelt das Klicken auf das Kreuz, das Zurücksetzen und das Drücken der ESC-Taste. Ich bin sicher, es könnte wahrscheinlich besser geschrieben werden - ich bin noch relativ neu in Javascript. Folgendes habe ich letztendlich getan - ich verwende 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 = "";
}
});
});
Full Solution ist da
Dadurch wird die Suche gelöscht, wenn auf die Suche x geklickt wird. oder ruft den Such-API-Treffer auf, wenn der Benutzer die Eingabetaste drückt. dieser code kann mit einem zusätzlichen esc key-event-matcher erweitert werden. aber das sollte alles tun.
document.getElementById("userSearch").addEventListener("search",
function(event){
if(event.type === "search"){
if(event.currentTarget.value !== ""){
hitSearchAjax(event.currentTarget.value);
}else {
clearSearchData();
}
}
});
Prost.
Die Suche oder der OnKlick funktioniert ... aber das Problem, das ich gefunden habe, war bei älteren Browsern - die Suche schlägt fehl. Viele Plugins (Jquery Ui Autocomplete oder FancyTree-Filter) haben Unschärfen und Fokus-Handler. Das Hinzufügen zu einem Autocomplete-Eingabefeld funktionierte für mich (verwendet this.value == "", da es schneller auszuwerten war). Die Unschärfe hält dann den Cursor in der Box, wenn Sie auf das kleine "x" klicken.
Die PropertyChange und die Eingabe funktionierten sowohl für IE 10 und IE 8 als auch für andere Browser:
$("#INPUTID").on("propertychange input", function(e) {
if (this.value == "") $(this).blur().focus();
});
Für die FancyTree-Filtererweiterung können Sie eine Reset-Schaltfläche verwenden und das Click-Ereignis wie folgt erzwingen:
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);
Sollte dies für die meisten Anwendungen anpassen können.
basierend auf der Ereignisschleife von js wird die Schaltfläche click
on clear search
-Ereignis auf input auslösen, sodass der folgende Code wie erwartet funktioniert:
input.onclick = function(e){
this._cleared = true
setTimeout(()=>{
this._cleared = false
})
}
input.onsearch = function(e){
if(this._cleared) {
console.log('clear button clicked!')
}
}
Der obige Code onclick -Ereignis hat eine this._cleared = false
-Ereignisschleife gebucht, das Ereignis wird jedoch immer nach das onsearch
-Ereignis ausgeführt, sodass Sie den this._cleared
-Status stabil überprüfen können, um zu bestimmen, ob der Benutzer gerade geklickt hat X
und löste dann ein onsearch
-Ereignis aus.
Dies kann für fast alle {alle Bedingungen, eingefügten Text, incremental -Attribut, ENTER/ESC -Tastendruck usw. funktionieren.
Es ist jedoch ein bisschen hackig und die Antwort von ggutenberg wird für die meisten Menschen funktionieren.
$('#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);
});
Dabei ist '#search-field'
der jQuery-Selektor für Ihre Eingabe. Verwenden Sie 'input[type=search]'
, um alle Sucheingaben auszuwählen. Funktioniert durch Suchen nach einem Suchereignis (Antwort von Pauan) unmittelbar nach einem Klick auf das Feld.
versuchen Sie dies, ich hoffe Ihnen helfen
$("input[name=search-mini]").on("search", function() {
//do something for search
});