JavaScript clavier virtuel

Clavier virtuel lié à un champ TEXTAREA

introduction

Imaginez que vous êtes assis dans un café Internet de Londres qui souhaitent écrire un e-mail à votre famille vivant à Athènes. Il est bon si quelqu'un dans votre famille parle anglais. Si non, où vous trouverez un clavier avec une disposition grecque? Je suis sûr que vous pouvez rappeler une douzaine de situations où vous avez pensé, "je voudrais avoir un autre clavier." Cet article présente le clavier virtuel qui résout ce problème d'utilisabilité. La tâche de conception car il peut être spécifié comme suit:

  • Autoriser la saisie de texte à partir d'ordinateurs sans natif configuration de la langue de l'utilisateur installé, permettant ainsi la création d'interfaces nationales et multilingues - par exemple sur le Web e-mail - qui peut être utilisé dans le monde entier.
  • Autoriser la saisie de texte à partir d'ordinateurs sans clavier ou avec des écrans de capteurs - PC portables, smartphones, etc. - Ou avec des télécommandes comme les souris, les e-stylos, etc. étant les seuls périphériques d'entrée.
  • Protéger les utilisateurs de type keylogger spyware.

Installation du clavier virtuel exige une connaissance occasionnelle de HTML et JavaScript. Pour être en mesure d'affiner le script, vous devez être familier avec W3C DOM niveau 1, CSS niveau 1 et le modèle d'événement DOM / Microsoft Internet Explorer. Le clavier virtuel est un script open-source distribué sous la licence zlib / libpng.

installation

Six étapes faciles:

  1. Le téléchargement -source l'archive .

  2. Choisissez votre installation:

    • vkboard.js (dossier 1-vkboard dans l'archive) est le script principal. Clavier complet est simulé comme suit:

      Capture d'écran - jvk-full.jpg

    • vkboards.js (dossier 2-vkboard_slim) est presque le même que précédemment, mais le menu de la langue, qui peut être consulté en cliquant sur le rectangle rouge dans le coin inférieur gauche du clavier, a une configuration spéciale. Les cellules sont disposées en rangées, et non pas comme un simple menu déroulant vers le bas comme dans la variante précédente.

      Capture d'écran - jvk-slim.jpg

      • Cette installation est recommandée si vous êtes à court d'espace (UMPC, écran tactile kiosque, etc.) ou si vous avez 4 ou plusieurs mises en page installée

    • vnumpad.js (dossier 3-numpad_full) est la partie du pavé numérique du clavier.

      variante numpad

    • vatmpad.js (dossier 4-numpad_atm) est un numpad dépouillé qui ne contient que les touches Entrée et numéro.

      numpad_atm variante

  3. Inclure une référence au fichier de script choisi dans votre page HTML. 
      <HTML> <HEAD> <SCRIPT type = "text / javascript" src = "vkboard.js"> </ SCRIPT> ...
  </ HEAD>


  ...

    A noter que pour chaque type d'installation, deux fichiers de script sont disponibles:

    • vkboard.js / vkboards.js / vnumpad.js / vatmpad.js sont le script original. Si vous souhaitez modifier le script ou tout simplement pour apprendre comment il fonctionne, c'est le fichier pour que vous regardez.
    • vkboardc.js / vkboardsc.js / vnumpadc.js / vatmpadc.js est une version compressée du script, respectivement 30,5% / 30,5% / 39,8% / 39,5% plus petit que l'original. Ceci est le fichier que vous devez utiliser sur le web.

  4. Définir une fonction de rappel: 

      <HTML> <HEAD> <SCRIPT type = "text / javascript" src = "vkboard.js"> </ SCRIPT> fonction <SCRIPT> // Minimal de rappel:
  fonction keyb_callback (char) {

  s '// Soit bind vkeyboard à la <textarea> 
  // Avec id = "textfield":
  var = text 
  document.getElementById ( "textfield"), val = text.value;
  interrupteur (ch)
  {
  cas "Backspace":

  var = min (val.charCodeAt (val.length - 1) == 10)?
  2: 1;
  text.value = val.substr (0, val.length - min);
  break;
  cas "Enter":

  text.value + = "\ n";
  break;
  par défaut:
  text.value + = ch;
  }
  }
  </ SCRIPT> </ HEAD>

  ...

    La fonction de rappel doit avoir un ou deux paramètres. Le premier paramètre est obligatoire et accepte une valeur de chaîne renvoyée par le script vkeyboard. : Second paramètre est de l'option et accepte l' id du conteneur de l'vkeyboard qui a appelé le rappel. Il peut être utile si vous liez une fonction de rappel unique à plusieurs vkeyboards. Notez que ceci est fonction de rappel le plus fondamental. Exemple d'un de An avancé plus bas extrait de code est donnée plus tard .

  5. Un conteneur pour le définir le clavier, qui l'un A doit vider DIV ou SPAN . 
      <HTML> ...

  <BODY> ...

  <TEXTAREA id = "lignes de textfield" = " cols 10" = "50"> </ TEXTAREA> <DIV id = "clavier"> </ DIV> </ BODY> </ HTML>
  6. Enfin, afficher le clavier. 
      <BODY onload = "new VKeyboard ( " clavier ", keyb_callback);"> <- VKeyboard est représenté sur la charge, lié à récipient avec! 
   id = "clavier" et rappel fonction "keyb_callback" ->

    Cours le Of, les conditions de création de VKeyboard - le numpad: VNumpad , le style ATM du pavé numérique: VATMpad - CAN BE USED Anywhere JavaScript ci - dessous le code CAN BE.

API

Of The VKeyboard le constructeur a une myriade de paramètres Les pour vous aider à contrôler son «look and feel. Voici la liste complète, avec des paramètres par défaut. 

  var vkb =
 
  nouvelle VKeyboard ( "clavier", // id conteneur, obligatoire 
  keyb_callback, // référence à la fonction de rappel, obligatoire 
  // (This & paramètres suivants sont facultatifs ) 
  true, // créer les touches fléchées ou pas? 
  true, // créer flèches haut et bas clés?  
  false, // réservé
  
  true, // créer le pavé numérique ou non ? 
  "", // Nom de la police ( " " == système par défaut) 
  "14px", // taille de police dans px 
  "# 000", // couleur de la police
 
  "# F00", // couleur de la police pour les touches mortes 
  "#FFF", // Base de clavier fond couleur 
  "#FFF", // Fond "Touches de couleur 
  "#DDD", // Couleur de fond de commutation / élément sélectionné 
  "# 777", // couleur de la bordure
 
  "#ccc", // Border / police couleur de touche "inactive" 
  // (Key sans valeur / désactivé ) 
  "#FFF", // Couleur de fond de clé "inactif" 
  // (Key sans valeur / désactivé ) 
  "# F77", // couleur de la bordure de la cellule de sélection de la langue 
  true, // show flash touche clic ?  (False par défaut)
 
  "# CC3300", // couleur de la police pendant le flash 
  "# FF9966", // fond clé couleur pendant le flash 
  "# CC3300", // frontière touche de couleur pendant le flash 
  false, // intégrer VKeyboard dans la page ? 
  true, // écart utilisation 1 pixel entre les touches?
 
  0);
  // Index (0 à base) de la mise en page initiale

S'il vous plaît être prudent lors de la mise à niveau vkeyboard des versions antérieures. Toujours vérifier le nombre / débit des paramètres. VNumpad et VATMpad ont un jeu de paramètres La limitées: 

  var vkb =
 
  nouvelle VNumpad ( "numpad", // id conteneur, obligatoire 
  pad_callback, // référence à la fonction de rappel , obligatoire 
  "", // Nom de la police ( " " == système par défaut) 
  // (Ceci et paramètres suivants sont facultatifs ) 
  "14px", // taille de police dans px 
  "# 000", // couleur de la police
 
  "#FFF", // Base de clavier fond couleur 
  "#FFF", // Fond "Touches de couleur 
  "# 777", // couleur de la bordure
 
  true, // show flash touche clic ?  (False par défaut *)
 
  "# CC3300", // couleur de la police pour l' événement flash 
  "# FF9966", // fond clé couleur pour l' événement flash 
  "# CC3300", // frontière touche de couleur pour l' événement flash 
  false, // intégrer VNumpad dans la page ? 
  true);
  // Utiliser espace de 1 pixel entre les touches?

Ce Bien que la note "de l' instruction switch flash" est désactivée par défaut, IT est activé dans tous les fournis les échantillons . VKeyboard a le public les Méthodes suivantes.

  • Show : Affiche ou masque le vkeyboard entier. Il a un seul paramètre facultatif, une valeur booléenne qui indique si vous souhaitez afficher ou masquer. 
      vkb.Show (true);  // Affiche la vkeyboard
 
  vkb.Show (false);  // Masque la vkeyboard
 
  vkb.Show ();  // Affiche à nouveau le vkeyboard.
  L' action est par défaut.
  • ShowNumpad (et plein de variantes minces seulement): Affiche ou masque le pavé numérique. Il a un seul paramètre facultatif, une valeur booléenne qui dicte si vous voulez afficher ou masquer. 
      vkb.ShowNumpad (true);  // Affiche la numpad
 
  vkb.ShowNumpad (false);  // Masque la numpad
 
  vkb.ShowNumpad ();  // Affiche à nouveau le pavé numérique.
  Cette action est par défaut.
  • " set-param" >SetParameters : Permet de régler les paramètres de vkeyboard L'AT du runtime. La fonction accepte un nombre pair de valeurs par paires: le nom du paramètre vkeyboard et la valeur du paramètre. 
      // Réglage seul paramètre:
 
  vkb.SetParameters ( "font-couleur", "# F0A050");
 // Réglage de deux paramètres à la fois:
 
  vkb.SetParameters ( "font-name", "Arial", "font-couleur", "# F0A050");

    noms de paramètres valides sont:

    • callback - le rappel fonctionne la référence. valeur de paramètre valide: référence à une fonction quelconque avec 1 ou 2 paramètres formels
    • font-name - nom du clavier de la police. valeur de paramètre valide: nom de la police ou une chaîne vide (= police par défaut)
    • font-size - size police en pixels. valeur de paramètre valide: taille de la police en pixels
    • font-color - couleur de la police. Paramètre de la valeur trouvée ici valide et plus loin :: string dans le format de #xxxxxx ou #xxx , clause where x est le tout chiffre hexadécimal valide Le
    • dead-color - la couleur des touches mortes
    • base-color de base-color - la couleur de la base du clavier
    • key-color - couleur des touches
    • selection-color - couleur: élément sélectionné dans la langue ou le menu L'utilisateur est actif Une touche de modification
    • border-color - couleur de la bordure clé
    • inactive-border-color - couleur de la bordure des personnes handicapées sur la touche
    • inactive-key-color - couleur de l'arrière - plan a utilisé la clé désactivée
    • lang-cell-color - couleur de la bordure du menu de la langue L'utilisateur est un objet
    • click-font-color de click-font-color - couleur de la bordure du menu de la langue L'utilisateur est un objet
    • click-key-color - couleur bordure du menu de langue L'utilisateur est un objet
    • click-border-color - couleur de la bordure du menu de la langue L'utilisateur est un objet
    • show-click - show Pour clé de flash sur le clic. Paramètre de valeur valide: true ou false
    • layout en layout - index (nombre entier à base 0) de la mise en page pour passer à. Utilisez-le pour passer par programmation layouts

suite de tests

Le script est livré avec les exemples suivants:

  1. 1-edit-Simple.html. L'installation la plus basique du clavier virtuel JavaScript.

  2. 2-edit-full.html. Idem avec le par Presque ci - dessus, mais la keyb_callback fonction est pas simple comme SO IT WAS. Installation simple seulement Alors ajoute ou supprime les caractères à partir de la fin du texte dans un TEXTAREA , l'cet échantillon Permet au texte d'édition dans la façon dont vous êtes habitué avec le tout autre traitement de texte. Cet exemple montre comment le clavier virtuel JavaScript doit normalement être utilisé. Tous les autres échantillons sont dérivés de celui-ci.

  3. 3-edit-translator.html. Celui-ci est utile si vous avez le clavier, mais il n'a pas votre mise en page d'origine sur ses touches. Il suffit de lancer cette installation, mettez vkeyboard à votre mise en page d'origine et le type avec un vrai clavier, pas de souris. Le script va remplacer les caractères tapés avec ceux choisis dans vkeyboard.

  4. 4-test-change.html. Illustre l'utilisation de l'échantillon des SetParameters l'API. Regardez comment vkeyboard change de couleur.

  5. 5-test-fly.html. Exemple montre comment gérer plusieurs champs d'entrée avec un seul vkeyboard.

  6. 6-test-fly-anonym.html. Idem avec le par Presque ci - dessus, mais les champs d'entrée sont autorisés à l'omettre l' id propriété. Peut être très utile pour l'introduction d'vkeyboard dans les sites / pages existantes où les changements de page ne sont pas souhaitables.

  7. 7-test-any-css.html. Exemple montre comment définir la vkeyboard la taille avec des unités autres que les pixels. Fonction spéciale A, convert_to_px , est utilisé pour l'unité de conversion des chaînes arbitraires à des valeurs à base de pixels. Les unités de l'autorisés suivants sont: px , % , em , ex , pt , pc , cm , mm et in . La Note Que la convert_to_px fonction est de toujours tout à fait expérimental. Le principal problème est de La Que seul le MS le navigateur IE Fournit un moyen - Via l' window.screen.logicalXDPI propriété - à la mise en DPI récupérer l'écran actuel, le qui est utilisé pour la conversion du rapport absolu aux unités de longueur. Le tout navigateur AUTRES Avec seulement px , % , em et ex CAN BE USED en cours d' exécution en toute sécurité. Un réglage "habituel" de 96 points par pouce - assez communes pour les machines Windows - est utilisé si d'autres unités de longueur sont spécifiées.

  8. 8 test scale.html- . Cet exemple montre comment sidestep le problème de police d'échelle dans Mozilla et MS IE navigateurs. Problème avec le MS de l'IE C'est IT ne zoome, à savoir le changement lit de taille de police, sur les éléments qui ne possèdent pas le font-size de style de la définir explicitement. Le navigateur Mozilla a de The Sélectionnez un problème similaire: il fait le changement , le font-size , mais ne pas le changement des dimensions de l'élément conteneur du texte. Le cet échantillon In, le script suit les modifications apportées à la base font-size et les utilisations clause SetParameters l'API à l' échelle de manière appropriée le vkeyboard la mise en page. Cet échantillon doit être considéré que dans Mozilla (Firefox) et MS IE. navigateur Opera implémente un zoom intelligent - dire qu'il effectue un zoom juste la page entière - et donc ne souffre pas du problème. Vous pouvez également résoudre ce problème avec l'un des navigateurs wrapper du MS IE. Par exemple, MyIE2 (Maxthon) met également en œuvre un zoom intelligent. Il y avait aussi des rumeurs que le navigateur Firefox 3 mettra en vedette un comportement zoom page Opera-like.

Que tous de la note du précède les échantillons trouvés! CAN BE dans le dossier de l'vkboard source de l'archive . Des variantes autres que le clavier complet ne sont pas fournis avec la suite de test complet, seulement avec un seul échantillon qui montre la plus simple installation de toutes les variantes.

Créer votre propre configuration de la langue

Deux étapes faciles:

  • Les append avail_langs de tableau avec un membre du réseau à deux à deux Composé de l'abréviation de la langue - Habituellement , un 639-1 ISO langue ci - dessous le code - la mise en page et le nom écrit dans cette langue, l'Unicode a Valeurs hex en utilisant la clause where nécessaire. 
      avail_langs:
  [[ "Us", "English (US)"],
  [ "Ca", "canadienne" ],
  [ "Ru", "& # x0420; & # x0443; & # x0441;"  +
  «& # X0441; & # x043A ; & # x0438; & # x0439;"  ]
  [ "De", "Deutsch" ],
  [ "Fr", "Fran & # x00E7; ais"],
  [ "Es", "Espa & # x00F1; ol"],
  [ "It", "Italiano" ],
  [ "Cz", "& # x010C; esky"],
  [ "El", "& # x0388; & # x03BB; & # x03BB;"  + 
  «& # X03B7; & # x03BD ; & # x03B1; & # x03C2;"  ]
  [ "Il", "& # x05E2; & # x05D1; & # x05E8; & # x05D9; & # x05EA;"  ]];
  • Définir "normal" et, éventuellement, les "Caps Lock" ed, "Shift" ed, ed et "AltGr + Maj" matrices ed "AltGr". Les règles suivantes sont applicables:
    • Le nom de chaque tableau doit commencer par l'abréviation de la langue et le symbole de soulignement.
    • Les noms des tableaux avec des valeurs représentant des symboles pour un clavier avec "Caps Lock" pressé doit se terminer par "bouchons". 
        // Mise en tchèque:
 
  Cz_caps: [ "& # x003B; "  , ..., "& # X002D; "  ];
    • Les noms des tableaux avec des valeurs représentant des symboles d'un clavier avec "Shift" enfoncée doit se terminer par «changement». 
        Cz_shift: [ "& # x00BA; "  , ..., "& # X005F; "  ];
    • Les noms des tableaux avec des valeurs représentant des symboles d'un clavier avec "AltGr" pressé doit se terminer par "Alt_Gr." 
        Cz_alt_gr: [..., "& # x0021;"  "X002F & #";  ];
    • Les noms des tableaux avec des valeurs représentant des symboles pour un clavier avec les touches "Shift" enfoncée doit se terminer par "AltGr" et "alt_gr_shift." 
        Cz_alt_gr_shift: [ "& # x007E; "  , ..., "& # X003F; "  ];
    • Les noms des tableaux avec des valeurs représentant les symboles de l'état normal d'un clavier - dire sans touches de modification enfoncées - doit se terminer par «normal». 
        Cz_normal: [ "& # x003B; "  , ..., "& # X002D; "  ];
    • Chaque tableau doit avoir exactement 48 entrées, chacune contenant un ou l' autre de la hexadécimaux de la valeur du symbole approprié ou, dans le cas d'une touche morte, le du tableau constitué de l'un hexagone de valeur pour le ce symbole mort et le nom de ses des matrices prédéfinies suivantes:
      • Acute (?)
      • Breve (˘)
      • Caron ()
      • Cedilla (?)
      • Circumflex (^)
      • DialytikaTonos (, dialytika tonos, + tréma aiguë combinée)
      • DotAbove (˙, Access dot ci - dessus)
      • DoubleAcute (˝, le double aigu)
      • Grave ( `)
      • Ogonek (˛)
      • RingAbove (°, sonner ci - dessus)
      • Tilde (~)
      • Umlaut (?)

      En outre, le Macron (ˉ) diacritique du tableau est disponible Via macron.txt le fichier dans le dossier 1 vkboard of-the l'archive . Il ne figure pas au script principal car aucune mise en page Je sais implémente comme une touche morte. 

        Cz_alt_gr: [[ "& # x0060 ;"  ,], // Morts "Grave" clé 
  "& # X0021";
  ... // Clé simple
    • Les tableaux sont mis en correspondance avec la mise en page en fonction de l'illustration suivante, où les nombres dans les cellules sont les indices de tableau.

      array-to-key mapping

    • Le tableau "normal" est obligatoire; d'autres sont facultatifs.

    Les dispositions suivantes de la sont un construit dans la pleine et de variantes de clavier mince. Le nombre / index à côté du nom de la mise en page est l'indice de mise en page dans la base de données de la mondialisation IBM:

    • English (International, États - Unis) - 103P
    • Le Canadien (norme multilingue) - tirée de l'article de Wikipedia sur les dispositions de clavier
    • Allemand - 129
    • Français - 189
    • Espagnol - 173
    • Italian - 142
    • Russie - 443
    • Tchèque - 243
    • Grec - 319
    • Hébreu - 212

    24 autres mises en page sont disponibles dans une mise en page séparée paquet qui peut être trouvé dans le dossier 5 layout_pack dans l' archive . Il comprend:

    S'il vous plaît voir le fichier readme.txt dans le dossier 5-layout_pack dans l'archive pour obtenir des instructions au sujet de ces dispositions.

Créer votre propre disposition de clavier

Vous pouvez créer une mise en page de touche personnalisée. Il y a deux façons d'y parvenir:

  1. Utilisez atm.js comme modèle; il est le script le plus simple de quatre. Numpad_atm le dossier Voir la dans l'archive pour plus de détails. En bref, le flux de script est la suivante:

    • Créer la boîte extérieure. 

        var initx = 0, Inity = 0;

 ...
 var kb = document.createElement ( «DIV» );
 ct.appendChild (kb);
 ct.style.display = "bloc";
 ct.style.position = "absolue";
 ct.style.top = Inity + "px", ct.style.left = initx + "px";
 kb.style.position = "relative";
 kb.style.top = "0px", kb.style.left = "0px";
 kb.style.border = + bc "1px solid" ;
 var kb_main = document.createElement ( «DIV» );
 kb.appendChild (kb_main);
 kb_main.style.position = "relative";
 kb_main.style.width = "1px";
 kb_main.style.cursor = "default";
 kb_main.style.backgroundColor = bkc;

 ...

    • Les touches avec le Créer l' _setup_key méthode. 

        var kb_pad_7 = ce ._setup_key (kb_main, "1px", 
  "1px", cp, cp, bc, c, lh, fs);
 kb_pad_7.sub.innerHTML = "7";

 kb_pad_7.sub.id = container_id + "___pad_7";

    • Toutes les sorties à la Route du _generic_callback_proc méthode. Le Pour VATMpad l'objet, cela est fait dans le Le _set_key_state méthode de l' actualisation de la 'tandis que' la mise en page. 

        ce ._setup_event (key_sub, 'mousedown' , 
  cette ._generic_callback_proc);

    • Invoquer la fonction de rappel. Cela arrive quand un l'utilisateur "appuie sur la touche" "." 

        _generic_callback_proc: function (event)
 {
  ...
  if (val && vkboard.Callback)

  vkboard.Callback (val);
 }

      Exemple de disposition

Appelez au-delà

Une caractéristique naturelle que tous les utilisateurs attendent d'un champ de texte est la possibilité de modifier le texte à une position quelconque dans un champ. Cependant, il est impossible SO impossible de le faire avec une fonction décrite précédemment , la seule qui ajoute ou symboles Enlève de la fin du texte. Le script suivant est une tentative d'écrire une fonction de rappel compatible pour remplir la tâche décrite. Il est en grande partie basée sur la discussion dans le forum de thescripts.com. 

  <HEAD>
  <Script type = "text / javascript "> <! -
  var ouvert = false,

  Insertions = -1, // début de la sélection 
  insertionE = 0;
  // Fin de sélection
 
  var userstr = navigator.userAgent.toLowerCase ();

  var = safari (userstr.indexOf ( 'AppleWebKit ') = -1!);
  var gecko = (userstr.indexOf ( 'gecko ') = -1!) && safari !;
  var standr = gecko ||
  window.opera ||  safari;
  ...
  // Avancée fonction de rappel:
 
  //
   fonction keyb_callback (ch)

  {
  var val = text.value;

  interrupteur (ch)

  {
  cas "Backspace":

  if (val.length)

  {
  var durée = null;

  if (document.selection)

  . Span = document.selection.createRange () duplicate ();
  if (durée && span.text.length> 0)

  {
  span.text = "";
  getCaretPositions (texte);
  }
  autre deleteAtCaret (texte);

  }
  break;

  cas "<":

  if (Insertions> 0)

  SetRange (texte, Insertions - 1, insertionE - 1);

  break;

  cas ">":

  if (insertionE <val.length)

  SetRange (texte, Insertions + 1, insertionE + 1);

  break;

  cas "/ \\":
 
   if (standr!) briser;
 
   var prev = val.lastIndexOf ( "\ n ", Insertions) + 1;
 
   var pprev = val.lastIndexOf ( "\ n ", prev - 2);
 
   var next = val.indexOf ( "\ n ", Insertions); 
   if (suivant == -1) next = val.length; 
   var Nnext = prochaines - Insertions;
 
   if (prev> suivante)
 
   {
 
   prev = val.lastIndexOf ( "\ n" , Insertions - 1) + 1;
 
   pprev = val.lastIndexOf ( "\ n" , prev - 2);
 
   }
 
   // Nombre de caractères dans la ligne courante à la gauche du curseur: 
   var gauche = Insertions - prev;
 
   // Longueur de la précédente.
  ligne:
 
   var plen = prev - pprev - 1;
 
   // Nombre de caractères dans la précédente.
  ligne
  
   // Le droit du caret:
 
   droit var = (plen <= gauche )?  1: (plen - gauche);
 
   changement var = gauche + droite;
 
   SetRange (texte, Insertions - changement, insertionE - changement); 
   break;
 
   cas "\\ /":
 
   if (standr!) briser;
 
   var prev = val.lastIndexOf ( "\ n ", Insertions) + 1;
 
   var next = val.indexOf ( "\ n ", Insertions); 
   var pNext = val.indexOf ( "\ n ", à côté + 1);
 
   if (suivant == -1) next = val.length; 
   if (pNext == -1) pNext = val.length; 
   if (pNext <suivant) pNext = suivant; 
   if (prev> suivante)
 
   prev = val.lastIndexOf ( "\ n" , Insertions - 1) + 1;
 
   // Nombre de caractères dans la ligne courante à la gauche du curseur: 
   var gauche = Insertions - prev;
 
   // Longueur de la ligne suivante:
 
   var NLEN = pNext - suivant;
 
   // Nombre de caractères dans la ligne suivante à la gauche du curseur: 
   droit var = (NLEN <= gauche )?  0: (NLEN - gauche - 1);
 
   changement var = ( à côté - Insertions) + NLEN - droit; 
   setRange (texte, Insertions + changement, insertionE + changement); 
   break;
 
   par défaut:
 
   insertAtCaret (texte,
  
   (Ch == "Enter" (window.opera '\ r \ n': '\ n'): ch ??)); 
   }
 
   }
 
   }
 
 
   // Cette fonction récupère la position (en caractères, par rapport à 
   // Le début du texte) du curseur d'édition (caret), ou, si 
   // Texte est sélectionné dans le TEXTAREA, les positions de début et de fin 
   // De la sélection.
 
   //
 
   getCaretPositions de fonction (ctrl)
 
   {
 
   var CaretPosS = -1, CaretPosE = 0;
 
   // Mozilla façon:
 
   if (ctrl.selectionStart || (ctrl.selectionStart == '0'))
 
   {
 
   CaretPosS = ctrl.selectionStart;
 
   CaretPosE = ctrl.selectionEnd;
 
   Insertions = CaretPosS == -1?
  CaretPosE: CaretPosS;
 
   insertionE = CaretPosE;
 
   }
 
   // IE chemin:
 
   else if (document.selection && ctrl.createTextRange)
 
   {
 
   début var = end = 0;
 
   essayer
 
   {
 
   start =
  
   Math.abs (
 
   document.selection.createRange (). movestart ( «caractère »,  
   -10000000));
  // démarrage
 
   if (start> 0)
 
   {
 
   essayer
 
   {
 
   var endReal =
  
   Math.abs (
 
   ctrl.createTextRange (). MoveEnd ( «caractère »,  
   -10000000));
 
   var r = document.body.createTextRange ();
 
   r.moveToElementText (ctrl);
 
   var STEST =
  
   Math.abs (r.moveStart ( «caractère», -10.000.000)); 
   var eTest =
  
   Math.abs (r.moveEnd ( «caractère», -10.000.000)); 
   if ((ctrl.tagName.toLowerCase ()! = 'input') &&  
   (ETest - endReal == STEST))
 
   commencer - = STEST;
 
   }
 
   catch (err) {}
 
   }
 
   }
 
   catch (e) {}
 
   essayer
 
   {
 
   end =
  
   Math.abs (
 
   document.selection.createRange (). MoveEnd ( «caractère »,  
   -10000000));
  // end
 
   if (end> 0)
 
   {
 
   essayer
 
   {
 
   var endReal =
  
   Math.abs (
 
   ctrl.createTextRange (). MoveEnd ( «caractère »,  
   -10000000));
 
   var r = document.body.createTextRange ();
 
   r.moveToElementText (ctrl);
 
   var STEST =
  
   Math.abs (r.moveStart ( «caractère», -10.000.000)); 
   var eTest =
  
   Math.abs (r.moveEnd ( «caractère», -10.000.000)); 
   if ((ctrl.tagName.toLowerCase ()! = 'input') &&  
   (ETest - endReal == STEST))
 
   fin - = STEST;
 
   }
 
   catch (err) {}
 
   }
 
   }
 
   catch (e) {}
 
   Insertions = commencer;
 
   insertionE = fin
 
   }
 
   }
 
   fonction setRange (ctrl, début, fin ) 
   {
 
   if (ctrl.setSelectionRange) // manière standard ( Mozilla, Opera, ...) 
   {
 
   ctrl.setSelectionRange (début, fin);
 
   }
 
   else // MS IE
 
   {
 
   gamme var;
 
   essayer
 
   {
 
   range = ctrl.createTextRange ();
 
   }
 
   catch (e)
 
   {
 
   essayer
 
   {
 
   range = document.body.createTextRange ();
 
   range.moveToElementText (ctrl);
 
   }
 
   catch (e)
 
   {
 
   range = null;
 
   }
 
   }
 
   if (plage!) retour;
 
   range.collapse (true);
 
   range.moveStart ( «caractère», commencer) ; 
   range.moveEnd ( "caractère", fin - début); 
   range.select ();
 
   }
 
   Insertions = commencer;
 
   insertionE = end;
 
   }
 
   fonction deleteSelection (ctrl)
 
   {
 
   if (Insertions == insertionE) return;
 
   var tmp =
  
   (Document.selection &&
  
   ! Window.opera)?
  ctrl.value.replace (/ \ r / g, ""): ctrl.value; 
   ctrl.value =
  
   tmp.substring (0, Insertions) + tmp.substring (insertionE,
  
   tmp.length);
 
   setRange (ctrl, Insertions, Insertions) ; 
   }
 
   fonction deleteAtCaret (ctrl)
 
   {
 
   if (Insertions! = insertionE)
 
   {
 
   deleteSelection (ctrl);
 
   retour;
 
   }
 
   if (Insertions == insertionE)
 
   Insertions = Insertions - 1;
 
   var tmp =
  
   (Document.selection &&
  
   ! Window.opera)?
  ctrl.value.replace (/ \ r / g, ""): ctrl.value; 
   ctrl.value =
  
   tmp.substring (0,
  
   Insertions) + tmp.substring (insertionE, tmp.length ); 
   setRange (ctrl, Insertions, Insertions) ; 
   }
 
   // Cette fonction insère le texte à la caret Position: 
   //
 
   fonction insertAtCaret (ctrl, val)
 
   {
 
   if (Insertions = insertionE!) deleteSelection (ctrl); 
   if (isgecko && document.createEvent &&! window.opera ) 
   {
 
   var e = document.createEvent ( "KeyboardEvent" ); 
   if (e.initKeyEvent && ctrl.dispatchEvent)
 
   {
 
   e.initKeyEvent ( "keypress", // dans DOMString typeArg, 
   false, // dans canBubbleArg booléen,
 
   true, // dans cancelableArg booléen,
 
   null, // dans nsIDOMAbstractView viewArg,
 
   false, // en booléen ctrlKeyArg,
 
   false, // dans altKeyArg booléen,
 
   false, // dans shiftKeyArg booléen,
 
   false, // dans metaKeyArg booléen,
 
   null, // code clé;
 
   val.charCodeAt (0));
  // Code Char.
 
   ctrl.dispatchEvent (e);
 
   }
 
   }
 
   autre
 
   {
 
   var tmp =
  
   (Document.selection &&
  
   ! Window.opera)?
  ctrl.value.replace (/ \ r / g, ""): ctrl.value; 
   ctrl.value =
  
   tmp.substring (0,
  
   Insertions) + val + tmp.substring (Insertions , 
   tmp.length);
 
   }
 
   setRange (ctrl, Insertions + val.length, Insertions + val.length); 
   }
 
   // -> </ SCRIPT>
 
  </ HEAD>
 
  <BODY>
 
   ...
 
   <- Ne pas oublier cette «onclick » et «onkeyup ': -> 
   <textarea onkeyup = "getCaretPositions (ce );" onclick = "getCaretPositions (this);" id = "lignes de textfield" = " cols 12" = "50">
 
   </ TEXTAREA>
 
   ...
 
  </ BODY>

Notez que les flèches vers le haut et vers le bas sur un travail de clavier virtuel que sur les normes navigateurs conformes! Prenez cela en compte lors de la création d'applications de l'écran tactile. Vous pouvez tester le script ci - dessus en exécutant le 2-full.html le modifier fichier trouvé! Vkboard dans le dossier de l'attaché de l'archive . rappel de base est démontrée dans 1-Simple.html l'edit- .

Trucs et astuces

Déroulement du script est assez simple, SO I espère que ce sera le BE difficile de ne pas plonger dans l' informatique. Voici quelques mots sur quelques endroits difficiles.

  • Événement mis en place. Nous devons gérer à la fois MS IE et modèles d'événements DOM W3C. 

      _setup_event: function (elem, eventType, gestionnaire)
 {
  retour (elem.attachEvent? // façon MS IE
 
  elem.attachEvent ( "on" + eventType, gestionnaire):
  ((Elem.addEventListener)? // Moyen le W3C 
  elem.addEventListener (eventType, gestionnaire, false) : null));
 }

  • container Key set-up. Consiste clé Chaque l ' «extérieur» de DIV - clause where nous l'ensemble du haut, à gauche, la largeur et la hauteur des paramètres La seule - et "avec intérieure" DIV , le qui accepte l'espacement, la bordure et les paramètres de couleur de l'autre. Nous utilisons une telle construction complexe pour contourner le problème de modèle de boîte de navigateurs modernes. Notez qu'il ya la solution JavaScript. Si vous souhaitez éviter le problème de modèle de boîte en utilisant le CSS, vous pouvez voir l'article de Trenton Moss (voir point 6 #). 

      _setup_key: function (parent, id, haut, gauche, largeur, hauteur,
  text_align, line_height, taille_police,
  font_weight, padding_left, padding_right)
 {
  var existe = document.getElementById (id);

  // Outer DIV:
 
  var key =
 
  existe?  exists.parentNode: document.createElement ( «DIV») ;
  ce ._setup_style (clé,
 
  ! Existe, haut, gauche, largeur , hauteur, «absolue»);
  // Inner DIV:
 
  var key_sub = existe?
  existe: document.createElement ( «DIV») ;
  key.appendChild (key_sub);  parent.appendChild (clé);
  ce ._setup_style (key_sub,
 
  ! Existe, "", "" , "", line_height, «relative»,
  text_align, line_height, taille_police, font_weight,
  padding_left, padding_right);
  key_sub.id = id;
  retour key_sub;

 }

  • Désactivation de la sélection du contenu. Celui-ci est très importante en raison de la vitesse de frappe très élevée que certaines personnes peuvent atteindre et, en conséquence, la sélection de contenu vkeyboard inévitable. CAN le UTILISÉ que ce soit un lieu de la UNSELECTABLE (MS IE) et -moz-user-select (les navigateurs basés sur Gecko) propriétés. 

      cette ._setup_event (kb_main "selectstart" ,
  function (event)
 
  { 
  return false;
 
  });
 ce ._setup_event (kb_main, "mousedown" ,
  function (event)
 
  { 
  if (event.preventDefault)

  event.preventDefault (); 
  return false;
 
  });

code

Virtual Keyboard propose un coup d'oeil

  • Une boîte à outils complète JavaScript appropriée pour simuler tous les aspects d'un véritable dispositif de clavier
  • Compact (42,8 Kb - variante complète comprimé) script qui ne nécessite pas d'images, pour un téléchargement plus rapide
  • Travaux et regarde de la même manière sur tous les navigateurs principaux, testé sur Mozilla Firefox 1.5 / 2, Opera 7.5 / 9.22, Safari 3, MS IE 6/7
  • procédure de mise en place très simple
  • Autonome, sans dépendances externes
  • police personnalisable, la taille et les couleurs font; parfait pour les environnements skinable
  • Plusieurs variantes sont disponibles, y compris un clavier complet, un clavier complet mince, numpad et numpad ATM style
  • scripts compressés sont regroupés, ce scénario complet: 42,8 Kb, mince: 43 Kb, numpad: 9.30 Kb, atm-numpad: 8.62 Kb
  • Dix configurations de clavier fréquemment utilisés sont fournis avec les scripts complets et mince, 24 autres dispositions sont dans le pack de mise en page prévue
  • Options d'installation flexibles, à savoir un certain nombre de vkeyboards par page, callbacks réglables
  • scripts open-source distribué sous licence zlib / libpng, ce qui signifie qu'il peut être utilisé gratuitement, même sur des sites commerciaux

exigences Script

Tout navigateur qui est conscient de:

  • JavaScript (mise en œuvre conforme à l'édition ECMAScript 3)
  • W3C DOM Niveau 1
  • CSS niveau 1 (au moins la plupart des éléments)
  • W3C ou MS IE modèle d'événement