Javascript Girl
  1. Javascript Girl
  3. Afficher le clavier différent de celui dactylographié dans google chrome
Intereting Posts
Détecter les modifications dans les objets à l'intérieur du tableau dans Angular2 Fonction ParseFloat sensible à la culture en JavaScript? Comment mettre en feu la méthode une seule fois lorsque vous utilisez Panright avec Hammer.js? Lecture en longitude mesurée en degrés avec un lsb de 1×10 ^ -7 degrés, complément de signature 2 Comment obtenir la distance du haut pour un élément? Enrouler ma tête autour de prototypes dans JS Comment échapper aux entités xml en javascript? Quoi de neuf avec une classe JavaScript dont le constructeur renvoie une fonction ou un objet Comment récupérer l'arrière-plan de DIV sur une couche inférieure avec une position exacte en utilisant jQuery et CSS En utilisant javascript pour attribuer une variable php Changement de champ de saisie du mot de passe du texte au mot de passe sur le focus / type? Maps Api V3: getCenter () et getZoom () ne fonctionnent pas Comment envelopper la balise html pour les wrods de sélection de jquery mouseup? ExtJs Comment puis-je faire défiler jusqu'au bas d'une grille? Comment puis-je lire le nom de machine / ordinateur du client à partir du navigateur?

Afficher le clavier différent de celui dactylographié dans google chrome

Je travaille sur un clavier javascript qui cherche à permettre aux utilisateurs de taper dans diverses langues africaines. À l'heure actuelle, cela fonctionne bien dans IE8 et Firefox, mais pas sur google chrome, et je suis actuellement coincé sur celui-ci. Ce que je veux accomplir est Par exemple, pour taper (sur mon clavier physique) ' q ' (keyCode = 113) et obtenir ' ɛ ' (keyCode = 603) comme sortie, mais actuellement, mon code ne fait rien dans google chrome. La partie pertinente de mon code est la suivante: 

var k_layouts = {}; k_layouts.Akan = {88:390,113:603};//keyCode mappings for Akan language k_layouts.Ga = {120:596,81:400};//keyCode mappings for Ga language var current_layout = ""; //function that maps the keyCode of a **typed** key to that of the **expected** key function map_key_code(keycode){ if(k_layouts[current_layout] && k_layouts[current_layout][keycode]) return k_layouts[current_layout][keycode]; return keycode; } //function that actually changes the keyCode of a **typed** key to the **expected** value function handle_keypress(ev){ var ev = ev || window.event; if(ev.bubbles != null ||!ev.bubbles) return true; var target = ev.target || ev.srcElement; var keyCode = window.event? ev.keyCode: ev.which; if(keyCode == 0) return true; var newKeyCode = map_key_code(keyCode); if(newKeyCode == keyCode) return true; if(target.addEventListener){ //for chrome and firefox //cancel event ev.preventDefault(); ev.stopPropagation(); //create new event with the keycode changed var evt = document.createEvent("KeyboardEvent"); try{//for firefox(works fine) evt.initKeyEvent("keypress",false,true,document.defaultView,ev.ctrlKey,ev.altKey,ev.shiftKey,ev.metaKey,newKeyCode,newKeyCode); } catch(e){// for google chrome(does not work as expected) evt.initKeyboardEvent("keydown",false,true,document.defaultView,ev.ctrlKey,ev.altKey,ev.shiftKey,ev.metaKey,newKeyCode,newKeyCode); } //dispatch new event target.dispatchEvent(evt); } else if(target.attachEvent){// works for IE ev.keyCode = newKeyCode; } }

Y a-t-il un moyen de réaliser ce que je cherche à faire en chrome? Ou est-ce qu'il me manque quelque chose dans ma démarche? Je serais ravi de votre aide et de mes pensées.

Il serait plus facile de ne pas créer un nouvel événement qui, comme vous l'avez vu, n'est pas universellement pris en charge, puis annulez l'événement et insérez le caractère mappé correspondant au caractère saisi.

En supposant que l'utilisateur tape dans une zone de texte avec l'identifiant "ta", les éléments suivants traitent l'entrée du clavier pour cette zone de texte dans tous les principaux navigateurs, cartographiant q à ɛ et tous les autres caractères à "X" à titre illustratif.

Soyez conscient qu'il y a des problèmes dans IE <= 8 avec le code pour trouver la sélection à faire avec les sauts de ligne que le code suivant ne gère pas pour des raisons de brièveté. Vous pouvez obtenir ma fonction de navigateur croisé pour la traiter correctement ici: existe-t-il un substitut approuvé par Internet Explorer pour la sélectionStart et selectionEnd? 

 var charMap = { "q": "ɛ" }; document.getElementById("ta").onkeypress = function(evt) { var val = this.value; evt = evt || window.event; // Ensure we only handle printable keys, excluding enter and space var charCode = typeof evt.which == "number" ? evt.which : evt.keyCode; if (charCode && charCode != 13 && charCode != 32) { var keyChar = String.fromCharCode(charCode); // Get the mapped character (default to "X" for illustration purposes) var mappedChar = charMap[keyChar] || "X"; var start, end; if (typeof this.selectionStart == "number" && typeof this.selectionEnd == "number") { // Non-IE browsers and IE 9 start = this.selectionStart; end = this.selectionEnd; this.value = val.slice(0, start) + mappedChar + val.slice(end); // Move the caret this.selectionStart = this.selectionEnd = start + 1; } else if (document.selection && document.selection.createRange) { // For IE up to version 8 var selectionRange = document.selection.createRange(); var textInputRange = this.createTextRange(); var precedingRange = this.createTextRange(); var bookmark = selectionRange.getBookmark(); textInputRange.moveToBookmark(bookmark); precedingRange.setEndPoint("EndToStart", textInputRange); start = precedingRange.text.length; end = start + selectionRange.text.length; this.value = val.slice(0, start) + mappedChar + val.slice(end); start++; // Move the caret textInputRange = this.createTextRange(); textInputRange.collapse(true); textInputRange.move("character", start - (this.value.slice(0, start).split("\r\n").length - 1)); textInputRange.select(); } return false; } };