2008-10-14 7 views
4

Je voudrais avoir un élément d'entrée (type = text) ou un élément textarea qui valide dynamiquement en déclenchant des frappes spécifiques. Cela sera utilisé pour l'entrée pinyin chinois, par exemple:Déclenchez une pression sur une touche avec jQuery ... et spécifiez quelle touche a été pressée

L'utilisateur tape "ma2" dans un élément d'entrée. L'événement keydown se déclenche à chaque frappe, et le 2 n'apparaît jamais. Au lieu de cela, lorsque l'utilisateur appuie sur "2", le "a" recevra une marque de ton, comme ceci: "á". A la fin, l'utilisateur aura tapé: "má". Ceci peut être accompli en lisant et en changeant toute la valeur d'entrée en utilisant $ (element) .val() cependant, quand un élément d'entrée a le focus et sa valeur est définie en appelant .val ("quelque chose"), le curseur se déplace à la fin du texte. Cela fonctionne très bien dans la plupart des situations, car un utilisateur continue à taper à la fin du champ, mais je veux que cela fonctionne dans toutes les situations.

... une autre solution à ce problème serait d'obtenir/définir l'emplacement d'un curseur dans un élément d'entrée ou de textarea. Je ne pense pas que cela soit possible en javascript, cependant.


Donc, Remy était sur la bonne voie à coup sûr. Déclencher des touches ne me permettrait pas d'entrer des caractères spéciaux sans beaucoup de tracas de toute façon. Au lieu de cela, j'attrape l'événement keydown et définissez la valeur de l'entrée/textarea, puis déplacez le curseur.

Je n'ai pas trouvé quelque chose de bon pour obtenir/régler dans jQuery, mais ce qui suit a vraiment brisé ce problème pour moi. Je posterai un lien vers mon code d'entrée final pinyin quand il sera stable. C'est assez proche maintenant.

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

Répondre

8

Vous ne pouvez pas avoir beaucoup de chance keypress déclenchement - Je suis assez sûr que si la pression de touche est digne de confiance (à savoir son origine à partir du navigateur), il ne sera pas ramassé.

Cependant, vous pouvez remplacer le texte et insérer le carat où il se trouvait au lieu de le tirer jusqu'au bout de la ficelle. Vous devez utiliser setSelectionRange et createTextRange (pour IE).

J'ai mis en place une petite démo - les remplacements que vous verrez ne correspondent pas à de vrais mots, mais il montre comment cela fonctionne:

http://jsbin.com/emudi/ (pour modifier la source http://jsbin.com/emudi/edit)

Le Astuce est de prendre note de l'endroit où le carat est, remplacer le mot trouvé en utilisant substr (plutôt que regex pour éviter de remplacer les mauvaises correspondances) puis en plaçant le carat à la fin du nouveau mot.

Le remplacement est déclenché sur l'espace ou estompé. Une note sur ceci - vous pourriez déclencher le remplacement sur un caractère spécifique (c.-à-d. Le '2') - mais je ne recommanderais pas rechercher des remplacements sur chaque keypress.

1

En outre, pour un code simple contrôle de la « caret » d'une manière cross-browser cela pourrait être utile:

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

un peu en retard avec la réponse, mais je suis sûr que vous trouverez toujours ce vieux choses utiles.

Questions connexes