Vorwort
In letzter Zeit muss das Produkt viele Eingabefaktoren erstellen. Der interaktive Effekt, den das Produkt will, ist: Der Benutzer kann Chinese und Englisch eingeben, und wenn die Benutzereingabe eingeht, kann die Anzahl der eingegebenen Zeichen in Echtzeit angezeigt werden. Wenn die Größengrenze die Grenze überschreitet, wird der Rand der Eingabefeld rot und der Benutzer wird nach Informationen aufgefordert.
Diese Interaktion klingt wie kein Problem, und es scheint keine Schwierigkeiten bei der technischen Implementierung zu geben. Als ich es jedoch bemerkte, stieß ich auf die chinesische Eingabemethode und stellte fest, dass es Fallstricke gab.
Was für ein Trick, mal siehe unten ~~
Echtzeitüberwachung der Inhaltslänge des Eingangsfelds wird zur Überwachung oninput Ereignisses verwendet.
Es gibt zwei Vorteile, um dieses oninput -Ereignis zu verwenden:
Wenn der Benutzer den Inhalt des Eingabefelds durch Klicken mit der rechten Maustaste ändert, ist er zu hören.
Dieses Ereignis wird nur ausgelöst, wenn sich der Inhalt des Eingangsfelds ändert. Beispielsweise wird dieses Ereignis nicht ausgelöst, wenn der Benutzer die Steuertasten des Steuerelements wie die Pfeiltasten, control / shift usw. drückt.
Der Effekt ist perfekt, wenn Sie englische Zeichen oder Zahlen eingeben und selbst wenn Sie正常输入中文. Wenn Sie jedoch非正常输入中文tritt ein Fehler auf. Wie ist abnormale Input? Siehe das folgende Beispielbild:
Hast du es gesehen? Bei dieser chinesischen Eingabemethode hat der Benutzer die Chinesen, die er eingeben, nicht eingegeben, sondern nur ein paar Pinyin eingegeben, aber input Eingabeereignis wurde ausgelöst, und der value ist tatsächlich d'd'd , nicht nur die Pinyin -Zeichen, sondern auch die getrennten Punkte. Wenn die Länge des Inhalts des Eingangsfelds auf nicht mehr als 5 begrenzt ist, wird der Benutzer im Fall von Screenshot aufgefordert,字符长度超过限制！ . Natürlich sind solche interaktiven Effekte nicht das, was das Produkt will.
Verwenden Sie onkeydown / onkeypress / onkeyup -Events, um zuzuhören
Der Nachteil dieser Ereignisse ist, dass sie nicht auf den Eingangsinhalt von der Rechtsklick kopiert werden können, aber wird es das gleiche Problem wie input Eingabeereignis geben?
Ich habe mehrere Experimente durchgeführt und festgestellt, dass keydown und keyup dieselben Probleme wie input haben, aber keypress hat dieses Problem nicht, da im chinesischen Eingabestatus keypress nicht ausgelöst wird. Es wird nicht nur während des Eingebens des Pinyin ausgelöst, sondern auch die chinesische Sprache, die Sie wie "richtig, rechts, rechts, rechts, rechts, rechts aus. Wenn dann "rechts, rechts, rechts" eingegeben wird, obwohl die Zeichengrenze überschritten wird,字符长度超过限制！ Tipps für.
Eine Kompromisslösung
Um die Länge des Inhalts in Echtzeit zu überwachen und sicherzustellen, dass die chinesische Eingabemethode keine Fehler gibt, habe ich lange Zeit Probleme und stellte fest, dass ich es nicht kann! (Wenn ein Held gefunden wird, sagen Sie es mir bitte ~~).
Am Ende wurde die Benutzererfahrung geopfert und ein Kompromiss gefunden: Das Eingabefeld verlor seinen Fokus (d. H. blur ), oder der Benutzer überprüfte nur die Inhaltslänge, wenn der Eingabetaste eingegeben wurde. Wenn Sie feststellen, dass der Inhalt des Eingangsfelds das Grenzwert überschreitet, sollten Sie den Cursor im Eingabefeld aufbewahren, um die Änderung der Benutzer zu erleichtern.
Leider用户输入回车键时才进行内容长度的检测.
So erkennen Sie, dass die Eingabetaste in das Eingabefeld eingegeben wird
Tatsächlich ist dies eine sehr häufige Interaktion. Wenn Sie den Namen beispielsweise ändern, wird der Benutzer beispielsweise direkt nach dem Eingeben der Beförderung eingeben und speichern. Wenn Sie sich bei der Anmeldung anmelden, wird der Benutzer bei der Eingabe des Wagens direkt eingeben und sich anmelden. Die Fallstrick ist jedoch vorsichtig: **中文输入法下按回车键来输入英文字符** .
Beispiele für den Prozess des Drückens der Eingabetaste, um englische Zeichen unter der chinesischen Eingabemethode einzugeben:
Wenn ich beispielsweise das Konto eingeben möchte, um sich anzumelden, ist mein Konto in allen Englisch. Ich bin derzeit in der chinesischen Eingangsmethode, aber ich bin zu faul, um die Eingabemethode zu wechseln, daher habe ich mein Konto (alle englischen Zeichen) direkt getippt. Zu diesem Zeitpunkt veranlasste mich die Sogou -Eingabemethode eine große Chinesischkette, und dann drückte ich die Eingabetaste, und das Eingabefeld hat die gewünschten englischen Zeichen eingegeben.
Obwohl der Benutzer die Eingabetaste eingegeben hat, drückte der Benutzer die Eingabetaste, um englische Zeichen unter der chinesischen Eingabemethode einzugeben. Diese Eingabetaste ist nicht die Eingabetaste, die wir überwachen möchten. Wie kann man die Eingabetaste in diesem Fall ausschließen?
Im Allgemeinen verwenden wir beim Anhören der Eingabetaste keydown -Ereignis oder keyup -Ereignis, und der Implementierungscode ist wie folgt. Können beide Methoden die Eingabetasten herausfiltern, die wir nicht hören möchten?
// Methode 1: Verwenden Sie das Schlüsseldown -Ereignis input.onkeydown = Funktion (e) {if (e.keycode == 13) {// Der Benutzer gibt den Eingabetaste ein // dos verwandte Operationen}} // Methode 2: Verwenden Sie das Taste Ereignis input.onkeyUp = Funktion (e) {if (E.KeyCode == 13) {// Die Benutzern -Eingabetaste. Nach den Experimenten wurde festgestellt, dass die Verwendung keydown erfolgreich filtern kann, die Verwendung von keyup jedoch nicht.
Lassen Sie uns also sehen, warum?
Dies liegt daran, dass der im Zustand der chinesische Eingabemethode eingegebene Schlüsselereignis im keydown -Ereignis: Der erkannte keyCode beträgt 229 anstelle von 13 ; Wenn Sie einfach eine Rückgabe eingeben, ist keyCode 13 .
Im keyup -Ereignis: keyCode der durch Eingabe der Eingabetaste im chinesischen Eingabemethode -Zustand erkannt wird, beträgt 13 ; Wenn Sie einfach eine Eingabetaste eingeben, beträgt keyCode auch 13 .
Die folgende Abbildung ist das Ergebnis, das ich in der Konsole gedruckt habe: (siehe hier für das Codebeispiel)
Abschluss
Mehrere Ereignisse, die am Eingabefeld beteiligt sind: Keydown/Taste/TastePress/Eingabe/Änderung
Sehen Sie sich hier an: //www.vevb.com/article/21237.htm