Évitez les bogues liés aux événements du clavier dans la translittération basée sur le navigateur

La méthode de saisie multilingue de Google, connue sous le nom de Google Input Tools est un bon exemple d'application Web. qui utilise la translittération pour saisir des caractères non anglais. L'idée de base est d'avoir une zone de texte, dans laquelle les utilisateurs épelent les mots de leur propre langue, en utilisant des caractères anglais. Ils tapent généralement ces mots à l'aide d'un clavier anglais. L'application Web convertit les frappes anglaises saisies en caractères de leur langue locale (non anglaise) et affiche ces caractères non anglais dans la zone de texte en temps réel. Les utilisateurs peuvent copier le texte de la zone de texte et le coller dans le champ de texte ou la barre de recherche sur une autre page Web ou application.

Dans cet article, nous verrons comment Google Input Tools se comporte sur un ordinateur de bureau et un navigateur mobile et identifier sa faiblesse, lors de l'exécution sur le navigateur Chrome sur Android. Nous comparerons également cela avec les performances de notre extrait de code JavaScript alternatif, et nous apprécierons comment il évite les problèmes liés au navigateur mobile Chrome. Vous pouvez utiliser cette méthode lorsque vous développerez votre propre alternative aux Outils de saisie Google à l'avenir.

Outils d'entrée Google

Ci-dessous, vous pouvez voir comment Outils d'entrée Google fonctionne sur un ordinateur de bureau et un navigateur mobile. Il est évident que la translittération ne fonctionne pas sur le navigateur mobile Chrome (sur Android) en raison d'une sorte de bogue. Vous pouvez le vérifier par vous-même en visitant Google Input Tools sur un PC et un appareil mobile exécutant Android avec navigateur Chrome.

Nous allons l'essayer en tapant un mot très simple en cinghalais, une langue officielle de l'île d'Asie du Sud, Sri Lanka. Nous allons taper le mot cinghalais "පහන", qui signifie "lampe" en anglais. Le mappage spécifié par Google Input Tools est «pa» pour «ප», «ha» pour «හ» et «na» pour «න». Donc, tapez simplement «pahana» dans la zone de texte Outils de saisie Google et appuyez sur Entrez . Les caractères cinghalais mappés, «පහන» apparaîtront dans la zone de texte.

Essayez ceci sur un ordinateur de bureau et un appareil mobile Android avec le navigateur Chrome. Comme le montrent les images ci-dessous, il fonctionne sur le navigateur de bureau Firefox mais échoue sur le navigateur mobile Chrome.

Comment est-ce arrivé? Il fonctionne parfaitement sur un navigateur de bureau, mais échoue sur le navigateur mobile Chrome fonctionnant sur Android.

Deux méthodes possibles

La conversion des frappes peut être facilement implémentée en utilisant JavaScript. Si la prédiction de mots est également impliquée, une base de données principale et donc PHP sont nécessaires, mais la fonctionnalité de base ne peut être obtenue qu'avec JavaScript.

Deux méthodes peuvent être utilisées pour l'implémenter. Ici, nous limiterons notre exemple à une conception de méthode de saisie très simple, où chaque caractère non anglais peut être directement mappé sur une seule touche unique.

Par exemple, nous pourrions mapper le caractère non anglais (cinghalais) " ප "au caractère anglais" p "ou à la touche" p "du clavier.

1. Méthode 1 (Méthode typique):
   Empêcher le comportement par défaut et capturer l'événement du clavier

   Il existe deux principaux étapes pour y parvenir avec JavaScript dans la méthode 1. Tout d'abord, le comportement par défaut lorsqu'une touche est enfoncée ou maintenue enfoncée doit être arrêtée. Ensuite, le ou les caractères que vous souhaitez saisir doivent être spécifiés dans les fonctions de capture d'événement KeyPress, KeyDown ou KeyUp./>[19459041ITEDLecomportementpardéfautlorsqu'unetoucheestenfoncéeoumaintenueenfoncéeconsisteàtaperlecaractèreassociéàcettetouchesurleclavierParexemplelorsquelatouche«p»estenfoncéelecaractèreanglais«p»seratapépardéfautdanslazonedetexteNouspourrionsempêchercecomportementpardéfautetremplacerlecaractèrepardéfautpourn'importequellecléparuncaractèrenonanglaisdenotrechoix/>[19459041[Dansnotreexemplenousempêcheronsdetaper«p»lorsquelaclé«p»estpresséetinsérerparprogrammationlecaractèremappé"ප"aulieuducaractère"p"Nouspouvonslefairepourtouslescaractèresmappésduclavier

2. Méthode 2 (Nouvelle méthode):
   Écoutez l'entrée de la zone de texte et modifiez le contenu en temps réel, en fonction de la dernière entrée

   Dans cette méthode, nous ne traitons aucun événement de clavier. Au lieu de cela, nous garderons la trace du dernier caractère saisi dans la zone de texte et remplacerons ce caractère par un caractère non anglais de notre choix.

   En arrière-plan, notre script doit écouter les modifications du contenu de la zone de texte . Lorsque vous appuyez sur la touche "p", tapez "p". Lorsque le script détecte que le dernier caractère tapé est "p", il doit supprimer par programme ce "p" tapé et le remplacer par "ප". De la même manière, tout caractère non anglais peut être tapé en les affectant à un caractère anglais via un mappage approprié.

   Chaque fois qu'un caractère anglais est tapé en appuyant sur une touche du clavier, il vous suffit de programmer supprimez ce caractère tapé et remplacez-le par le caractère non anglais spécifié dans le mappage.

Quelle méthode utilise Google Input Tools?

D'après ce qui se passe dans les deux scénarios différents, il semble que Google Input Tools utilise la première méthode (méthode 1), qui est également la manière typique de mettre en œuvre une telle fonctionnalité. Maintenant que nous avons inventé une nouvelle méthode (méthode 2), il est temps de faire un peu d'expérimentation.

Comparons les deux méthodes

Ci-dessous, vous pouvez comparer les performances des deux méthodes différentes sur Firefox sur un ordinateur portable et Navigateur mobile Chrome sur un appareil mobile Android. Contrairement à Google Input Tools qui utilise plus d'un caractère anglais par caractère non anglais, nous avons déjà utilisé un mappage un à un pour plus de simplicité. Selon notre cartographie, "p" est égal à "ප", "h" est égal à "හ" et "n" est égal à "න". Donc, tapez simplement "phn" pour produire le mot cinghalais "පහන".

Seule la méthode 2 (c'est notre nouvelle méthode) peut gérer à la fois l'ordinateur portable et le navigateur mobile Chrome sans aucun problème. La méthode 1 (la méthode typique) échoue en ce qui concerne le navigateur mobile Chrome.

Vous pouvez également visiter mon CodePen et vérifier par vous-même.

Résoudre un autre problème mineur

Si vous rencontrez des résultats inattendus lorsque vous tapez à l'aide de translittération sur votre mobile Android, c'est parce que vous avez activé la prédiction de texte sur le clavier virtuel de votre mobile. Désactivez simplement la prédiction de texte, les suggestions automatiques et la capitalisation automatique et cela devrait fonctionner comme par magie.

Cependant, SwiftKey (pré-installé sur la plupart des téléphones Huawei) ne permet pas de désactiver la prédiction de mots. Ainsi, l'installation d'une alternative telle qu'un clavier Gboard résoudra ce problème. Désactivez la prédiction de texte plus les suggestions automatiques et commencez à taper.

Cet exemple CodePen suivant vous fournit le code source complet:

Revue de code

Pour démontrer la méthode 1 et la méthode 2, j'ai créé deux zones de texte nommées textarea1 et textarea2 dans un fichier HTML normal. Ensuite, j'ai ajouté un style CSS pour les rendre belles sur la page Web. À l'aide de deux scripts JavaScript pour modifier le contenu de ces deux zones de texte, j'ai pu implémenter les deux méthodes que je voulais expérimenter.

Pour la méthode 1

j'ai conçu une méthode pour capturer l'événement keydown et appeler un fonction nommée «whichKey» lorsque l'événement keydown se déclenche. L'événement JavaScript onkeydown se déclenche chaque fois qu'un utilisateur appuie sur une touche du clavier. Je l'ai utilisé pour capturer l'événement du clavier.

Fonction whichKey gère le travail principal d'empêcher le comportement par défaut lorsqu'une touche est enfoncée. Il appelle ensuite une autre fonction nommée «typeIt1», qui est chargée de taper les caractères réels non anglais (cinghalais) selon le mappage de notre choix. Chaque fois qu'une touche est enfoncée sur le clavier, la fonction whichKey transmet cette touche enfoncée à la fonction typeIt1 qui à son tour tape le caractère cinghalais pertinent dans la zone de texte.

You peut se référer à l'exemple bien commenté sur CodePen et voir par vous-même comment cela a été réalisé:

Pour la méthode 2

Étant donné que le bogue du navigateur Chrome sur Android ne parvient pas à effectuer la translittération correctement, il affiche toujours les caractères anglais au lieu de les convertir en caractères cinghalais. Pourtant, cela fonctionne bien sur un navigateur de bureau. Donc, je soupçonnais que le bogue était dû à la capture incorrecte des événements du clavier sur le navigateur Chrome fonctionnant sur Android.

Puisque la correction du bogue du navigateur était clairement au-delà de mes capacités, j'ai décidé d'opter pour une astuce astucieuse. Et si je pouvais éviter le bug, plutôt que d'essayer de le corriger? Avec une pensée un peu plus innovante, j'ai pu trouver une solution.

Je suis passé à une toute nouvelle méthode qui ne repose pas sur la capture d'événements au clavier. Mon idée était de garder une trace des changements dans le contenu de la zone de texte. Lorsqu'une touche est enfoncée, le contenu de cette zone de texte change naturellement. Sur la base de ce changement, il est toujours possible d'introduire un autre changement, en utilisant JavaScript.

Par exemple, commencez avec une zone de texte vide. Supposons maintenant que la touche «p» ait été enfoncée. Ensuite, le contenu de la zone de texte passera de vide à «p». Le script exécuté en arrière-plan détectera cette modification et remplacera «p» par un caractère non anglais de mon choix. Ce choix pourrait être basé sur un mappage prédéterminé entre les caractères anglais du clavier et les caractères non anglais de la langue dans laquelle nous voulons taper.

Pour le démontrer, j'ai ajouté un événement oninput à textarea2. J'ai spécifiquement sélectionné oninput au lieu de onchange, car ce dernier met à jour le contenu uniquement après que la zone de texte perd le focus, tandis que le premier le met à jour immédiatement en appuyant sur les touches. Lorsque l'événement oninput se déclenche, il appelle une fonction nommée "typeIt2", qui gère le processus de remplacement du caractère anglais tapé par le caractère non anglais approprié.

Encore une fois, il existe un autre exemple sur CodePen qui décrit tous les éléments nécessaires informations dont vous avez besoin pour comprendre comment cela a été mis en œuvre.

Conclusion

Il est évident que notre nouvelle méthode peut réussir à éviter le problème lié à la translittération sur le navigateur Chrome fonctionnant sur Android. Bien que nous ayons utilisé un mappage un à un entre les caractères anglais et non anglais pour des raisons de simplicité, un mappage aussi simple pourrait ne pas être toujours possible. La plupart de ces langues – en particulier les langues asiatiques – regorgent de fonctionnalités très complexes et peuvent nécessiter des mappages plus avancés. La langue cinghalaise, par exemple, a des voyelles indépendantes, des consonnes, des signes de voyelle dépendants, des signes de voyelle dépendants supplémentaires, la ponctuation et divers autres signes.

Note : Pour plus de détails sur les tableaux de codes Unicode Sinhala, vous pouvez visiter la page pertinente sur Le consortium Unicode . Si vous envisagez de développer des applications de saisie de texte pour des langues non anglaises, je vous recommande de visiter The Unicode Consortium et d'améliorer vos connaissances sur Unicode avant de commencer votre projet. Il vous offre une couverture complète du sujet, y compris les bases, les meilleures pratiques et des détails techniques approfondis.

Si vous avez toujours voulu développer une alternative à Google Input Tools maintenant vous

(dm, il)