Préface
Récemment, le produit doit faire beaucoup de boîtes d'entrée. L'effet interactif que le produit souhaite est: l'utilisateur peut entrer dans le chinois et l'anglais, et à mesure que l'entrée de l'utilisateur entre, le nombre de caractères entrés peut être affiché en temps réel. Lorsque la limite de quantité dépasse la limite, la bordure de la zone d'entrée devient rouge et l'utilisateur est invité à des informations.
Cette interaction ne ressemble à aucun problème, et il ne semble y avoir aucune difficulté à mettre en œuvre technique. Mais quand je l'ai réalisé, j'ai rencontré la méthode d'entrée chinoise et j'ai découvert qu'il y avait des pièges.
Quelle astuce, voyons-nous ci-dessous ~~
Surveillance en temps réel de la longueur du contenu de la boîte d'entrée, la fosse rencontrée est utilisée pour surveiller oninput .
Il y a 2 avantages de l'utilisation de cet événement oninput :
Lorsque l'utilisateur modifie le contenu de la boîte d'entrée en cliquant avec le bouton droit, il peut être entendu;
Cet événement ne sera déclenché que lorsque le contenu de la zone d'entrée change. Par exemple, cet événement ne sera pas déclenché lorsque l'utilisateur appuie sur les touches de caractères de contrôle telles que les touches de flèche, control / shift , etc.;
L'effet est parfait lorsque vous entrez des caractères ou des chiffres anglais, et même lorsque vous正常输入中文. Mais lorsque vous非正常输入中文un bug se produira. À quoi ressemble une entrée anormale? Voir l'exemple suivant Image:
L'avez-vous vu? Dans cette méthode d'entrée chinoise, l'utilisateur n'a pas entré le chinois qu'il veut entrer, mais vient d'entrer quelques pinyin, mais input a été déclenché, et la value la boîte d'entrée écoutée est en fait d'd'd , non seulement les caractères Pinyin, mais aussi les points séparés. Si la longueur du contenu de la boîte d'entrée est limitée à pas plus de 5, alors dans le cas de la capture d'écran, l'utilisateur sera invité à字符长度超过限制！ . Bien sûr, ces effets interactifs ne sont pas ce que le produit veut.
Utilisez les événements onkeydown / onkeypress / onkeyup pour écouter
L'inconvénient de ces événements est qu'ils ne peuvent pas écouter le contenu d'entrée copié à partir du clic droit, mais y aura-t-il le même problème que input ?
J'ai fait plusieurs expériences et j'ai constaté que keydown et keyup rencontreront les mêmes problèmes que input , mais keypress n'a pas ce problème, car dans l'état d'entrée chinois, keypress ne se déclenchera pas, non seulement elle ne déclenchera pas pendant le processus d'entrée comme "droite, à droite". Ensuite, lorsque "à droite, à droite" est entré, bien que la limite de caractère soit dépassée,字符长度超过限制！ Conseils pour.
Une solution de compromis
Afin de surveiller la durée du contenu en temps réel et de m'assurer qu'il n'y a pas de bogues dans la méthode d'entrée chinoise, j'ai du mal depuis longtemps et j'ai finalement découvert que je ne peux pas le faire! (Si un héros est trouvé, veuillez me dire ~~).
Ainsi, en fin de compte, l'expérience utilisateur a été sacrifiée et un compromis a été trouvé: la boîte d'entrée a perdu son objectif (c'est-à-dire blur ), ou l'utilisateur n'a vérifié la longueur du contenu que lorsque la touche d'entrée a été entrée. Bien sûr, si vous constatez que le contenu de la zone d'entrée dépasse la limite, vous devez conserver le curseur dans la zone d'entrée pour faciliter la modification de l'utilisateur.
Hélas,用户输入回车键时才进行内容长度的检测et les pièges qu'il a déjà plantés.
Comment détecter que la touche Entrée est entrée dans la zone d'entrée
En fait, il s'agit d'une interaction très courante. Par exemple, lors de la modification du nom, il prend en charge l'utilisateur pour entrer et enregistrer directement après l'entrée dans le chariot, et lors de la connexion, il prend en charge l'utilisateur pour entrer et se connecter directement après l'entrée du chariot. Mais le piège pour être prudent est: **中文输入法下按回车键来输入英文字符** .
Exemples du processus d'appuyer sur la touche Entrée pour entrer des caractères anglais sous la méthode d'entrée chinoise:
Par exemple, si je souhaite saisir le compte pour se connecter, mon compte est en anglais. Je suis actuellement dans la méthode d'entrée chinoise, mais je suis trop paresseux pour changer la méthode d'entrée, donc j'ai directement tapé mon compte (tous les caractères anglais). À l'heure actuelle, la méthode d'entrée de SOGOU m'a incité une grande chaîne de chinois, puis j'ai appuyé sur Entrée, et la boîte d'entrée est entrée dans les caractères anglais que je voulais.
Dans ce cas, bien que l'utilisateur ait entré la touche Entrée, l'utilisateur a appuyé sur la touche Entrée juste pour entrer des caractères anglais sous la méthode d'entrée chinoise. Cette touche Entrée n'est pas la touche Entrée que nous voulons surveiller. Alors, comment exclure la clé Entrée dans ce cas?
D'une manière générale, lors de l'écoute de la touche Entrée, nous utiliserons keydown ou keyup , et le code d'implémentation est le suivant. Les deux méthodes peuvent donc filtrer les clés Entrée que nous ne voulons pas écouter?
// Méthode 1: Utilisez Keydown Event Input.OnkeyDown = function (e) {if (e.KeyCODE == 13) {// L'utilisateur entre la clé Entrée // Dos Operations connexes}} // Méthode 2: Utiliser l'entrée de l'événement KeyUp. Après des expériences, il a été constaté que l'utilisation keydown peut filtrer avec succès, mais l'utilisation keyup ne peut pas.
Alors voyons pourquoi?
En effet, dans l'événement keydown : la touche Entrée entrée entrée dans l'état de la méthode d'entrée chinoise, le keyCode détecté est 229 au lieu de 13 ; Lors de la simple entrée d'un retour, keyCode est 13 .
Dans l'événement keyup : keyCode détecté en entrant la touche Entrée dans l'état de la méthode d'entrée chinoise est 13 ; Lors de la simple entrée dans un ENTER, keyCode est également 13 .
Le chiffre suivant est le résultat que j'ai imprimé dans la console: (voir ici pour l'exemple de code)
Conclusion
Plusieurs événements impliqués dans la zone d'entrée: Keydown / Keyup / Keypress / entrée / modification
Voir ici: //www.vevb.com/article/21237.htm