Attiva un tasto premuto con jQuery & # 8230; e specifica quale tasto è stato premuto

Question

Vorrei avere un elemento di input (type = text) o textarea che si convalida dinamicamente innescando specifiche combinazioni di tasti. Questo verrà utilizzato per l'input pinyin cinese, quindi ad esempio:

L'utente digita " ma2 " in un elemento di input. L'evento keydown si attiva per ogni sequenza di tasti e il 2 non appare mai. Invece, quando l'utente preme " 2 " la "a" riceverà un segno di tono, come questo: " á " ;. Alla fine, l'utente avrà digitato: " má " ;.

Ciò può essere ottenuto leggendo e modificando l'intero valore di input usando $ (element) .val () tuttavia, quando un elemento di input ha lo stato attivo e il suo valore viene impostato chiamando .val (" qualcosa "), il cursore si sposta alla fine del testo. Funziona bene nella maggior parte delle situazioni perché un utente continua a digitare alla fine del campo, ma voglio che funzioni in tutte situazioni.

... un'altra soluzione a questo problema sarebbe quella di ottenere / impostare la posizione di un cursore all'interno di un elemento input o textarea. Non penso che ciò sia possibile in JavaScript, tuttavia.

---

Quindi, Remy era sicuramente sulla buona strada. Innescare i tasti premuti non mi permetterebbe di inserire caratteri speciali senza molta seccatura comunque. Invece, prendo l'evento keydown e imposto il valore dell'input / textarea, quindi muovo il cursore.

Non ho trovato nulla di buono per ottenere / impostare il cursore in jQuery, ma quanto segue mi ha davvero risolto il problema. Pubblicherò un link al mio codice di input pinyin finale quando sarà stabile. Adesso è abbastanza vicino.

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

Answer 1

Potresti non avere molta fortuna nell'attivare la pressione dei tasti - Sono abbastanza sicuro che a meno che la pressione dei tasti non sia attendibile (cioè provenga dal browser), non verrà presa.

Tuttavia, puoi effettuare la sostituzione del testo e reinserire il carato dov'era, invece di spararlo fino alla fine della stringa. Devi usare setSelectionRange e createTextRange (per IE).

Ho messo insieme una piccola demo: le sostituzioni che vedrai non corrispondono a parole reali, ma mostra come funziona:

http://jsbin.com/emudi/ (per modificare la fonte http://jsbin.com/emudi/edit )

Il trucco è prendere nota di dove si trova il carato, sostituire la parola trovata usando substr (piuttosto che regex per evitare di sostituire le corrispondenze sbagliate) e quindi riposizionare il carato alla fine della nuova parola.

La sostituzione viene attivata sulla pressione dello spazio o offuscando la distanza. Una nota a riguardo - potresti innescare la sostituzione su un personaggio specifico (cioè il '2') - ma non consiglierei di cercare sostituzioni su ogni keypress.

Answer 2

Inoltre, per un semplice codice che controlla il "caret" in modo cross-browser questo potrebbe essere utile:

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

un po 'in ritardo con la risposta, ma sono sicuro che troverai ancora utile questa roba vecchia.