Ich möchte erkennen, wann sich der Inhalt eines Textfelds geändert hat. Ich kann die Keyup-Methode verwenden, aber das erkennt auch Tastenanschläge, die keine Buchstaben erzeugen, wie die Pfeiltasten. Ich dachte an zwei Methoden, um dies mit dem Keyup-Ereignis zu tun:
- Überprüfen Sie explizit, ob der ASCII-Code der gedrückten Taste ein Buchstabe \ Rücktaste \ Löschen ist
- Verwenden Sie Verschlüsse, um sich den Text im Textfeld vor dem Tastenanschlag zu merken und zu überprüfen, ob sich dieser geändert hat.
Beide sehen etwas umständlich aus.
javascript
jquery
textbox
keypress
Olamundo
quelle
quelle
.keyup()
Veranstaltung ... mehr Infos hier: stackoverflow.com/questions/3003879/….change()
wenn er sich geändert hat.Antworten:
Beobachten Sie das 'Eingabe'-Ereignis anstelle von' Ändern '.
... was schön und sauber ist, aber noch erweitert werden kann auf:
quelle
Verwenden Sie das Ereignis onchange in HTML / Standard-JavaScript.
In jQuery ist dies das Ereignis change () . Zum Beispiel:
$('element').change(function() { // do something } );
BEARBEITEN
Was ist nach dem Lesen einiger Kommentare:
quelle
Das 'change'-Ereignis funktioniert nicht richtig, aber die' input 'ist perfekt.
quelle
.on
ab 1.7 (anstatt.bind
) empfohlen wird .Wie wäre es damit:
<jQuery 1.7
> jQuery 1.7
Dies funktioniert in IE8 / IE9, FF, Chrome
quelle
console.log
den Wert des Feldes eingeben, das zweimal protokolliert wird, wenn Sie ein Zeichen eingeben.Ja. Sie müssen nicht unbedingt Verschlüsse verwenden, aber Sie müssen sich den alten Wert merken und ihn mit dem neuen vergleichen.
Jedoch! Dies wird immer noch nicht jede Änderung erfassen, da es Möglichkeiten zum Bearbeiten von Textfeldinhalten gibt, bei denen kein Tastendruck erforderlich ist. Wählen Sie beispielsweise einen Textbereich aus und klicken Sie mit der rechten Maustaste. Oder ziehen Sie es. Oder legen Sie Text aus einer anderen App in das Textfeld ab. Oder ändern Sie ein Wort über die Rechtschreibprüfung des Browsers. Oder...
Wenn Sie also jede Änderung erkennen müssen, müssen Sie danach fragen. Sie
window.setInterval
können das Feld jede (sagen wir) Sekunde mit seinem vorherigen Wert vergleichen. Sie könnten auch Drahtonkeyup
auf die gleiche Funktion , so dass Änderungen , die sich durch Drücken von Tasten verursacht schneller reflektiert werden .Schwerfällig? Ja. Aber es ist das oder machen Sie es einfach auf die normale Art und Weise beim HTML-Wechsel und versuchen Sie nicht, sofort zu aktualisieren.
quelle
input
ist das HTML5- Ereignis realisierbar und funktioniert in den aktuellen Versionen aller gängigen Browser.Sie können das Ereignis 'Eingabe' verwenden, um die Inhaltsänderung im Textfeld zu erkennen. Verwenden Sie nicht 'live', um das Ereignis zu binden, da es in Jquery-1.7 veraltet ist. Verwenden Sie also 'on'.
quelle
Ich gehe davon aus, dass Sie etwas Interaktives tun möchten, wenn sich das Textfeld ändert (dh einige Daten über Ajax abrufen). Ich habe nach der gleichen Funktionalität gesucht. Ich weiß, dass die Verwendung einer globalen Lösung nicht die robusteste oder eleganteste Lösung ist, aber genau das habe ich gewählt. Hier ist ein Beispiel:
Hierbei ist zu beachten, dass ich setTimeout und nicht setInterval verwende, da ich nicht mehrere Anforderungen gleichzeitig senden möchte. Dies stellt sicher, dass der Timer "stoppt", wenn das Formular gesendet wird, und "startet", wenn die Anforderung abgeschlossen ist. Dazu rufe ich checkSearchChanged auf, wenn mein Ajax-Aufruf abgeschlossen ist. Natürlich können Sie dies erweitern, um die Mindestlänge usw. zu überprüfen.
In meinem Fall verwende ich ASP.Net MVC, sodass Sie im folgenden Beitrag sehen können, wie Sie dies auch mit MVC Ajax verknüpfen können:
http://geekswithblogs.net/DougLampe/archive/2010/12/21/simple-interactive-search-with-jquery-and-asp.net-mvc.aspx
quelle
Ich würde empfehlen, einen Blick auf das Widget für die automatische Vervollständigung der jQuery-Benutzeroberfläche zu werfen. Sie haben die meisten Fälle dort bearbeitet, da ihre Codebasis ausgereifter ist als die der meisten anderen.
Unten finden Sie einen Link zu einer Demoseite, auf der Sie überprüfen können, ob sie funktioniert. http://jqueryui.com/demos/autocomplete/#default
Sie werden den größten Nutzen daraus ziehen, die Quelle zu lesen und zu sehen, wie sie sie gelöst haben. Sie finden es hier: https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js .
Im Grunde machen sie alles, an das sie sich binden
input, keydown, keyup, keypress, focus and blur
. Dann haben sie spezielle Handhabung für alle Arten von Schlüsseln wiepage up, page down, up arrow key and down arrow key
. Ein Timer wird verwendet, bevor der Inhalt des Textfelds abgerufen wird. Wenn ein Benutzer eine Taste eingibt, die keinem Befehl entspricht (Aufwärts-Taste, Abwärts-Taste usw.), gibt es einen Timer, der den Inhalt nach etwa 300 Millisekunden untersucht. Im Code sieht es so aus:Der Grund für die Verwendung eines Timers besteht darin, dass die Benutzeroberfläche aktualisiert werden kann. Wenn Javascript ausgeführt wird, kann die Benutzeroberfläche nicht aktualisiert werden, daher der Aufruf der Verzögerungsfunktion. Dies funktioniert gut in anderen Situationen, z. B. wenn Sie sich auf das Textfeld konzentrieren (das von diesem Code verwendet wird).
Sie können also entweder das Widget verwenden oder den Code in Ihr eigenes Widget kopieren, wenn Sie nicht die jQuery-Benutzeroberfläche verwenden (oder in meinem Fall ein benutzerdefiniertes Widget entwickeln).
quelle
Ich möchte fragen, warum Sie versuchen zu erkennen, wann sich der Inhalt des Textfelds in Echtzeit geändert hat .
Eine Alternative wäre, einen Timer (über setIntval?) Einzustellen und den zuletzt gespeicherten Wert mit dem aktuellen zu vergleichen und dann einen Timer zurückzusetzen. Dies würde garantieren, dass JEDE Änderung erfasst wird, sei es durch Tasten, Maus, ein anderes Eingabegerät, das Sie nicht in Betracht gezogen haben, oder sogar durch JavaScript, das den Wert (eine andere Möglichkeit, die niemand erwähnt hat) von einem anderen Teil der App aus ändert.
quelle
Ziehen Sie in Betracht, ein Änderungsereignis zu verwenden ?
quelle
Verwenden Sie das
textchange
Ereignis über einen benutzerdefinierten jQuery-Shim, um die Cross-Browser-input
Kompatibilität zu gewährleisten. http://benalpert.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html (zuletzt gegabelter Github: https://github.com/pandell /jquery-splendid-textchange/blob/master/jquery.splendid.textchange.js )Dies behandelt alle Eingabe-Tags einschließlich
<textarea>content</textarea>
, was nicht immer mitchange
keyup
usw. funktioniert . (!) Nur jQueryon("input propertychange")
behandelt<textarea>
Tags konsistent, und das oben Genannte ist ein Shim für alle Browser, die dasinput
Ereignis nicht verstehen .JS Bin Test
Dies behandelt auch das Einfügen, Löschen und dupliziert den Aufwand beim Keyup nicht.
Wenn Sie kein Shim verwenden, verwenden Sie jQuery-
on("input propertychange")
Ereignisse.quelle
Es gibt ein komplettes Arbeits Beispiel hier .
quelle
So etwas sollte funktionieren, hauptsächlich weil
focus
undfocusout
am Ende zwei separate Werte vorliegen würden. Ich verwende esdata
hier, weil es Werte im Element speichert, aber das DOM nicht berührt. Es ist auch eine einfache Möglichkeit, den mit seinem Element verbundenen Wert zu speichern. Sie können genauso gut eine Variable mit höherem Gültigkeitsbereich verwenden.quelle
Dieser Code erkennt, wann immer sich der Inhalt eines Textfelds vom Benutzer geändert und durch Javascript-Code geändert hat.
quelle