Déclencher une frappe avec jQuery… et spécifier quelle touche a été appuyée

Question

Je souhaite disposer d’un élément d’entrée (type = text) ou d’un élément textarea validant dynamiquement en déclenchant des frappes spécifiques. Cela sera utilisé pour les entrées de pinyin chinois, par exemple:

L'utilisateur tape " ma2 " dans un élément d'entrée. L'événement keydown se déclenche pour 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: "á". En fin de compte, l'utilisateur aura tapé: "plus".

Ceci peut être accompli en lisant et en modifiant toute la valeur d’entrée en utilisant $ (élément) .val (). Cependant, quand un élément en entrée a le focus et que sa valeur est définie en appelant .val ("quelque chose"), le curseur se déplace à la fin du texte. Cela fonctionne bien dans la plupart des situations car un utilisateur continue simplement à taper à la fin du champ, mais je souhaite 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 input ou textarea. Je ne pense toutefois pas que cela soit possible en javascript.

Donc, Remy était sur le bon chemin à coup sûr. Le fait d’appuyer sur des touches ne me permettrait pas de saisir des caractères spéciaux sans trop de tracas. Au lieu de cela, j'attrape l'événement keydown et définit la valeur de l'entrée / textarea, puis déplace le curseur.

Je n’ai rien trouvé de bon à obtenir / régler dans jQuery, mais ce qui suit a vraiment permis de résoudre ce problème. Je posterai un lien vers mon dernier code d'entrée pinyin lorsqu'il sera stable. C'est assez proche maintenant.

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

Answer 1

Vous n’avez peut-être pas beaucoup de chance de déclencher l’application de la touche; je suis à peu près sûr que, à moins que l’appui sur la touche soit approuvé (c’est-à-dire provient du navigateur), il ne sera pas détecté.

Cependant, vous pouvez remplacer le texte et insérer le carat là où il se trouvait - au lieu de l'envoyer à la fin de la chaîne. 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 cela montre comment cela fonctionne:

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

Le truc consiste à noter où se trouve le carat, à remplacer le mot trouvé par substr (plutôt que par regex pour éviter de remplacer les mauvaises correspondances), puis à replacer le carat à la fin du nouveau mot.

Le remplacement est déclenché sur la touche Espace ou rend l’éloignement flou. Une remarque à ce sujet - vous pouvez déclencher le remplacement d’un caractère spécifique (par exemple, le «2») - mais je ne vous recommanderais pas de rechercher des remplaçants sur toutes les touches.

Answer 2

En outre, pour un code simple contrôlant le "caret" sur plusieurs navigateurs, 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 contenu utile.