Einen Tastendruck mit jQuery auslösen...und angeben, welche Taste gedrückt wurde

Question

Ich möchte ein Eingabeelement (type=text) oder ein Textarea-Element haben, das dynamisch validiert, indem es bestimmte Tastendrücke auslöst. Dies wird für die chinesische Pinyin-Eingabe verwendet werden, so zum Beispiel:

Der Benutzer gibt "ma2" in ein Eingabeelement ein. Das Keydown-Ereignis wird bei jedem Tastendruck ausgelöst, und die 2 erscheint nie. Wenn der Benutzer "2" drückt, erhält das "a" stattdessen eine Tonmarke, etwa so: "á". Am Ende wird der Benutzer getippt haben: "má".

Dies kann durch das Lesen und Ändern des gesamten Eingabewerts mit $(element).val() erreicht werden. Wenn jedoch ein Eingabeelement den Fokus hat und sein Wert durch den Aufruf von .val("irgendwas") gesetzt wird, bewegt sich der Cursor zum Ende des Textes. Das funktioniert in den meisten Situationen gut, weil ein Benutzer einfach am Ende des Feldes weitertippt, aber ich möchte, dass dies auch in alle Situationen.

...eine andere Lösung für dieses Problem wäre es, die Position eines Cursors innerhalb eines Eingabe- oder Textarea-Elements zu erhalten/zu setzen. Ich glaube nicht, dass dies in Javascript möglich ist, jedoch.

---

Remy war also mit Sicherheit auf dem richtigen Weg. Das Auslösen von Tastendrucken würde es mir nicht erlauben, Sonderzeichen ohne viel Aufwand einzugeben. Stattdessen fange ich das Keydown-Ereignis ab und setze den Wert des Eingabe-/Textfelds, und verschiebe dann den Cursor.

Ich habe nicht gefunden, etwas Gutes für Caret bekommen / Einstellung in jQuery, aber die folgenden wirklich brach dieses Problem für mich. Ich werde einen Link zu meinem endgültigen Pinyin-Eingabe-Code posten, wenn es stabil ist. Es ist ziemlich nah jetzt.

http://blog.vishalon.net/Post/57.aspx http://demo.vishalon.net/getset.htm

Answer 1

Möglicherweise haben Sie nicht viel Glück beim Auslösen des Tastendrucks - ich bin mir ziemlich sicher, dass der Tastendruck nicht erfasst wird, wenn er nicht vertrauenswürdig ist (d. h. vom Browser stammt).

Sie können jedoch den Text ersetzen und das Karat wieder dort einfügen, wo es war - anstatt es an das Ende der Zeichenkette zu schießen. Dazu müssen Sie setSelectionRange und createTextRange (für IE) verwenden.

Ich habe eine kleine Demo zusammengestellt - die Ersetzungen, die Sie sehen werden, entsprechen nicht den echten Wörtern, aber sie zeigen, wie es funktioniert:

http://jsbin.com/emudi/ (zum Bearbeiten der Quelle http://jsbin.com/emudi/edit )

Der Trick besteht darin, sich zu merken, wo sich das Karat befindet, das gefundene Wort mit substr zu ersetzen (anstatt mit regex, um zu vermeiden, dass die falschen Übereinstimmungen ersetzt werden) und dann das Karat wieder am Ende des neuen Wortes zu platzieren.

Die Ersetzung wird durch das Drücken der Leertaste oder das Verwischen der weg ausgelöst. Eine Anmerkung dazu - Sie könnten die Ersetzung bei einem bestimmten Zeichen auslösen (z. B. der "2") - aber ich würde nicht empfehlen, nach Ersetzungen zu suchen bei chaque Tastendruck.

Answer 2

Auch für einfachen Code, der den "Caret" browserübergreifend steuert, könnte dies nützlich sein:

http://javascript.nwbox.com/cursor_position/

etwas spät mit der Antwort, aber ich bin sicher, dass Sie diese alten Sachen noch nützlich finden werden.