This page has been robot translated, sorry for typos if any. Original content here.

Clavier virtuel JavaScript

Clavier virtuel lié à un champ TEXTAREA

Introduction

Imaginez que vous êtes assis dans un café Internet de Londres souhaitant écrire un e-mail à votre famille vivant à Athènes. C'est bon si quelqu'un dans votre famille parle anglais. Sinon, où trouveriez-vous un clavier avec une disposition grecque? Je suis sûr que vous pouvez vous rappeler une douzaine de situations où vous pensiez: «J'aimerais avoir un autre clavier. Cet article présente le clavier virtuel qui résout ce problème d'utilisabilité. La tâche de conception pour cela peut être spécifiée comme suit:

  • Autoriser la saisie de texte à partir d'ordinateurs sans que la disposition de langue native de l'utilisateur ne soit installée, permettant ainsi la création d'interfaces nationales et multilingues, par exemple un courrier électronique sur le Web.
  • Autoriser la saisie de texte depuis des ordinateurs sans clavier ou avec des écrans de détection - ordinateurs de poche, smartphones, etc. - ou avec des télécommandes telles que des souris, des stylos électroniques, etc. étant les seuls périphériques d'entrée.
  • Protégez les utilisateurs contre les logiciels espions de type keylogger.

L'installation du clavier virtuel nécessite une connaissance occasionnelle du HTML et du JavaScript. W3C DOM niveau 1, CSS niveau 1 et le modèle d'événement DOM / Microsoft Internet Explorer. Virtual Keyboard est un script open-source distribué sous licence zlib / libpng.

Configuration

Six étapes faciles:

  1. Téléchargez l' archive source .

  2. Choisissez votre installation:

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

      Capture d'écran - jvk-full.jpg

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

      Capture d'écran - jvk-slim.jpg

    • Cette installation est recommandée si vous manquez d'espace (UMPC, kiosque à écran tactile, etc.) ou si vous disposez de 4 mises en page ou plus.

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

      variante du pavé numérique

    • vatmpad.js (dossier 4-numpad_atm) est un pavé numérique dépouillé qui contient uniquement les touches Entrée et numérique.

      Variant numpad_atm

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

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

    • vkboard.js / vkboards.js / vnumpad.js / vatmpad.js sont le script d'origine. Si vous voulez changer le script ou simplement apprendre à l'utiliser.
    • 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. C'est le fichier que vous devriez utiliser sur le web.
  4. Définir une fonction de rappel:

      < HTML > < HEAD > < SCRIPT type = " texte / javascript" src = " vkboard.js" > </ SCRIPT > < SCRIPT > // Fonction de rappel minimale:
      function keyb_callback ( char ) {
      // Attachons vkeyboard au <TEXTAREA>
     
      // avec id = " textfield" :
      var text = 
      document.getElementById ( " textfield" ), val = text.value;
      commutateur (ch)
      {
      case " BackSpace" :
      var min = (val.charCodeAt (val.length - 1 ) == 10 )?  2 : 1;
      text.value = val.substr (0, val.length - min);
      rompre;
      cas " Entrer" :
      text.value + = " \ n" ;
      rompre;
      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. Le second paramètre est optionnel et accepte l' id du conteneur du vkeyboard. Cela peut être utile si vous liez une seule fonction de rappel à plusieurs claviers v. Notez que c'est la fonction de rappel la plus basique. Un exemple d'extrait de code plus avancé est donné plus tard .

  5. Définissez un conteneur pour le clavier, qui doit être un DIV ou un SPAN vide.
      < HTML > ...
      < CORPS > ...
      < TEXTAREA id = " textfield" lignes = " 10" cols = " 50" > < / TEXTAREA > < DIV id = " clavier" > < / DIV > < / BODY > < / HTML >
     
  6. Enfin, montre le clavier.
      < BODY onload = " new VKeyboard (" keyboard ", keyb_callback);" > <! - VKeyboard est affiché en charge, lié au conteneur avec
     
       id = "keyboard" et avec fonction de rappel "keyb_callback" ->
     

    Bien sûr, la création de VKeyboard - pavé numérique: VNumpad , pavé numérique de style ATM: VATMpad - peut être utilisé n'importe où, le code JavaScript peut être.

API

Le constructeur VKeyboard a une myriade de paramètres pour vous aider à contrôler son apparence. Voici la liste complète, avec les paramètres par défaut.

  var vkb = 
  new VKeyboard ( " keyboard" , // ID du conteneur, obligatoire
 
  keyb_callback , // référence à la fonction de rappel, obligatoire
 
  // (ceci et les paramètres suivants sont facultatifs)
 
  vrai , // crée les flèches ou non?
 
  vrai , // créer des flèches haut et bas?
  
  false , // réservé
  
  vrai , // crée le pavé numérique ou pas?
 
  " " , // nom de la police ("" == système par défaut)
 
  " 14px" , // Taille de police en px
 
  " # 000" , // police de caractères
 
  " # F00" , // couleur de la police pour les clés mortes
 
  " #FFF" , // couleur de fond du clavier
 
  " #FFF" , // couleur de fond des touches
 
  " #DDD" , // couleur de fond de l'élément sélectionné / sélectionné
 
  " # 777" , // couleur de la bordure
 
  " #CCC" , // bordure / couleur de la police "inactive"
 
  // (clé sans valeur / désactivée)
 
  " #FFF" , // couleur de fond de la clé "inactive"
 
  // (clé sans valeur / désactivée)
 
  " # F77" , // couleur de la bordure de la cellule du sélecteur de langue
 
  vrai , // montre la touche flash sur le clic?
  (false par défaut)
 
  " # CC3300" , // couleur de la police pendant le flash
 
  " # FF9966" , // Couleur de fond de la touche pendant le flash
 
  " # CC3300" , // couleur de la bordure de touche pendant le flash
 
  false , // embed VKeyboard dans la page?
 
  true , // utilise un espace de 1 pixel entre les touches?
 
  0 );  // index (basé sur 0) de la mise en page initiale
 

Soyez prudent lors de la mise à niveau de vkeyboard à partir de versions antérieures. Vérifiez toujours le nombre / le débit des paramètres. VNumpad et VATMpad ont un ensemble limité de paramètres:

  var vkb = 
  new VNumpad ( " numpad" , // ID du conteneur, obligatoire
 
  pad_callback , // référence à la fonction de rappel, obligatoire
 
  " " , // nom de la police ("" == système par défaut)
 
  // (ceci et les paramètres suivants sont optionnels)
 
  " 14px" , // Taille de police en px
 
  " # 000" , // police de caractères
 
  " #FFF" , // couleur de fond du clavier
 
  " #FFF" , // couleur de fond des touches
 
  " # 777" , // couleur de la bordure
 
  vrai , // montre la touche flash sur le clic?
  (false par défaut * )
 
  " # CC3300" , // couleur de police pour l'événement flash
 
  " # FF9966" , // couleur de l'arrière-plan pour l'événement flash
 
  " # CC3300" , // couleur de la bordure de touche pour l'événement flash
 
  false , // embarque VNumpad dans la page?
 
  vrai );  // Utilise un espace de 1 pixel entre les touches?
 

Notez que bien que "flash switch" soit désactivé par défaut, il est activé. VKeyboard a les méthodes publiques suivantes.

  • Show : Affiche ou masque l'ensemble du clavier virtuel. Il a un seul paramètre facultatif, une valeur booléenne qui indique s'il faut afficher ou masquer.
      vkb.Show ( vrai );  // Affiche le clavier virtuel
     
      vkb.Show ( faux );  // Masque le clavier virtuel
     
      vkb.Show ();  // Affiche le vkeyboard à nouveau.
      L'action est par défaut.
     
  • ShowNumpad (variantes complètes et minces uniquement): affiche ou masque le pavé numérique. Il a un seul paramètre facultatif, une valeur booléenne qui dicte si montrer ou cacher.
      vkb.ShowNumpad ( true );  // Affiche le pavé numérique
     
      vkb.ShowNumpad ( false );  // Masque le pavé numérique
     
      vkb.ShowNumpad ();  // Affiche à nouveau le pavé numérique.
      Cette action est par défaut.
     
  • " set-param" >SetParameters : Vous permet d'ajuster les paramètres de vkeyboard au moment de l'exécution. La fonction accepte un nombre pair de valeurs par paires: le nom du paramètre vkeyboard et la valeur du paramètre.
      // Ajustement d'un seul paramètre:
     
      vkb.SetParameters ( " font-color" , " # F0A050" );
     // Ajustement de deux paramètres à la fois:
     
      vkb.SetParameters ( " font-name" , " Arial" , " font-color" , " # F0A050" ); 

    Les noms de paramètres valides sont:

    • callback - référence de la fonction de rappel. Valeur de paramètre valide: référence à toute fonction avec 1 ou 2 paramètres formels
    • font-name -name de la police du clavier. Valeur de paramètre valide: nom de police ou chaîne vide (= police par défaut)
    • font-size -font taille en pixels. Valeur valide: taille de la police en pixels
    • font-color -font. Valeur de paramètre valide ici et plus sur: chaîne au format #xxxxxx ou #xxx , où x est un nombre hexadécimal valide
    • dead-color - couleur des touches mortes
    • base-color -color de la base du clavier
    • couleur des touches - couleur des touches
    • selection-color -color de: élément sélectionné dans le menu de langue ou clé de modification active
    • border-color - couleur de la bordure clé
    • inactive-border-color -border de la touche désactivée
    • inactive-key-color -background de la clé désactivée
    • lang-cell-color -border couleur de l'élément de menu de langue
    • click-font-color -border de l'élément de menu de langue
    • couleur de click-key-color -border de l'élément de menu de langue
    • couleur du click-border-color -border du menu du menu de la langue
    • show-click -show clique sur le clic. Valeur de paramètre valide: true ou false
    • layout - index (entier basé sur 0) de la mise en page à utiliser. Utilisez-le pour changer de configuration par programmation

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 . Presque le même que ci-dessus, mais la fonction keyb_callback n'est pas aussi simple qu'elle l'était. Bien que l'installation simple ne fasse qu'ajouter ou supprimer des caractères à la fin du texte dans un TEXTAREA , cet exemple vous permet de modifier le texte comme vous le feriez avec n'importe quel autre traitement de texte. Cet exemple montre comment le clavier virtuel JavaScript doit être utilisé. Tous les autres échantillons sont dérivés de celui-ci.

  3. 3-edit-translator.html . Celui-ci est utile si vous l'avez sur vos clés. Il suffit de lancer cette installation, basculer vkeyboard à votre disposition native et tapez avec un vrai clavier, pas une souris. Le script remplacera les caractères tapés par ceux choisis dans le vkeyboard.

  4. 4-test-change.html . Exemple d'utilisation de l'API SetParameters Regardez comment vkeyboard change de couleur.

  5. 5-test-fly.html . L'exemple montre comment gérer plusieurs champs INPUT avec un seul vkeyboard.

  6. 6-test-fly-anonym.html . Presque le même que ci-dessus, mais les champs INPUT sont autorisés à omettre la propriété id . / Où les changements de page sont indésirables.

  7. 7-test-any-css.html . L'exemple montre comment définir la taille de la police vkeyboard avec des unités autres que les pixels. Une fonction spéciale, convert_to_px , est utilisée pour convertir des chaînes unitaires arbitraires en valeurs basées sur des pixels. Les unités suivantes sont autorisées: px , % , em , ex , pt , pc , cm , mm et in . Notez que la fonction convert_to_px est encore assez expérimentale. Paramètre DPI, utilisé pour convertir des unités de longueur absolue en unités de longueur relative. Avec n'importe quel autre navigateur, seuls px , % , em et ex peuvent être utilisés en toute sécurité. Un paramètre "habituel" de 96 points par pouce - assez courant 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 contourner le problème de mise à l'échelle des polices dans les navigateurs Mozilla et MS IE. Le problème avec MS IE est que seuls les zooms, c'est-à-dire les changements de taille, sur les éléments qui n'ont pas explicitement le style de font-size . Le navigateur Mozilla a un problème similaire: il ne modifie pas les dimensions de l'élément conteneur du texte. Dans cet exemple, le script suit les modifications apportées à la font-size base et utilise l'API SetParameters pour SetParameters à l'échelle de manière appropriée la disposition vkeyboard. Cet exemple doit être visualisé uniquement dans Mozilla (Firefox) et MS IE. Le navigateur Opera implémente un zoom intelligent - c'est-à-dire qu'il ne fait que zoomer toute la page - et ne souffre donc pas du problème. Les navigateurs wrapper de MS IE. Par exemple, MyIE2 (Maxthon) implémente également un zoom intelligent. Il y a aussi des rumeurs selon lesquelles le navigateur Firefox 3 sera doté d'un comportement de zoom de type Opera.

Notez que tous les exemples ci-dessus peuvent être trouvés dans le dossier vkboard de l' archive source. Les variantes autres que le clavier complet ne sont pas fournies avec la suite de tests complète, seulement avec un seul échantillon qui montre l'installation la plus simple de chaque variante.

Créer votre propre mise en page de langue

Deux étapes faciles:

  • Ajoutez le tableau avail_langs avec un tableau à deux membres de l'abréviation de la langue - généralement un code de langue ISO 639-1 - et le nom de la disposition écrit dans cette langue, en utilisant des valeurs hexadécimales Unicode si nécessaire.
      avail_langs:
      [[ " Us" , " English (US)" ],
      [ " Ca" , " Canadien" ],
      [ " 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;"
      ],
      [ " He" , " & # x05E2; & # x05D1; & # x05E8; & # x05D9; & # x05EA;"
      ]]; 
  • Définissez "normal" et, optionnellement, les tableaux ed "Caps Lock", "Shift" ed, "AltGr" ed et "AltGr + Shift". Les règles suivantes s'appliquent:
    • Le nom de chaque tableau doit commencer par l'abréviation de la langue et le symbole de soulignement.
    • Noms de tableaux avec des valeurs présentant des symboles pour un clavier avec "Caps Lock".
        // Disposition tchèque:
       
        Cz_caps: [ " & # x003B;"
        , ..., " & # x002D;"
        ] 
    • Noms de tableaux avec des valeurs pour "Shift".
        Cz_shift: [ " & # x00BA;"
        , ..., " & # x005F;"
        ] 
    • Noms de tableaux avec des valeurs représentant des symboles pour un clavier avec "AltGr".
        Cz_alt_gr: [..., " & # x0021;"
        , " & # x002F;"
        ] 
    • Les noms de tableaux avec des valeurs représentant des symboles pour un clavier avec les touches "AltGr" et "Shift" enfoncées doivent se terminer par "alt_gr_shift".
        Cz_alt_gr_shift: [ " & # x007E;"
        , ..., " & # x003F;"
        ] 
    • Les noms de tableaux avec des valeurs représentant des symboles pour l'état normal d'un clavier - sans touches de modification enfoncées - doivent se terminer par "normal".
        Cz_normal: [ " & # x003B;"
        , ..., " & # x002D;"
        ] 
    • Chaque tableau doit avoir exactement 48 entrées, chacune contenant soit la valeur hexadécimale du symbole approprié, soit dans le cas d'une clé morte,
      • Acute (?)
      • Breve (˘)
      • Caron ()
      • Cedilla (?)
      • Circumflex (^)
      • DialytikaTonos (, dialytika tonos, combiné aigu + tréma)
      • DotAbove (˙, point ci-dessus)
      • DoubleAcute (˝, double aigu)
      • Grave (`)
      • Ogonek ( Ogonek )
      • RingAbove (°, anneau ci-dessus)
      • Tilde (~)
      • Umlaut (?)

      De plus, le tableau diacritique Macron (ˉ) est disponible via le fichier macron.txt dans le dossier 1-dossier de l' archive . Ce n'est pas inclus dans le script principal.

        Cz_alt_gr: [ [ " & # x0060;"
        , " Grave" ] , // touche morte
       
        " & # x0021;"
        , ... // simple clé
       
    • Les tableaux sont mappés à la mise en page selon l'illustration suivante, où les nombres sont dans les indices de tableau.

      cartographie de tableau à clé

    • Le tableau "normal" est obligatoire. les autres sont optionnels.

    Les dispositions suivantes sont intégrées aux variantes de clavier complet et mince. Le numéro / index en regard du nom de la présentation est l'index de la disposition dans la base de données IBM Globalization:

    24 autres mises en page sont disponibles dans un pack de mise en page distinct qui peut être trouvé dans le dossier 5-layout_pack de l' archive . Il comprend:

    Reportez-vous au fichier readme.txt dans le dossier 5-layout_pack de l'archive pour obtenir des instructions sur ces dispositions.

Créer votre propre disposition de clavier

Vous pouvez créer une disposition de clé personnalisée. Il y a deux façons d'y parvenir:

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

    • Créez la boîte externe.

        var initX = 0 , initY = 0 ;
       ...
       var kb = document.createElement ( " DIV" );
       ct.appendChild (kb);
       ct.style.display = " bloquer" ;
       ct.style.position = " absolu" ;
       ct.style.top = initY + " px" , ct.style.left = initX + " px" ;
       kb.style.position = " relatif" ;
       kb.style.top = " 0px" , kb.style.left = " 0px" ;
       kb.style.border = " 1px solide" + bc;
       var kb_main = document.createElement ( " DIV" );
       kb.appendChild (kb_main);
       kb_main.style.position = " relatif" ;
       kb_main.style.width = " 1px" ;
       kb_main.style.cursor = " default" ;
       kb_main.style.backgroundColor = bkc;
      
       ... 
    • Créez les clés avec la méthode _setup_key .

        var kb_pad_7 = cette touche ._setup (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" ; 
    • Acheminez toutes les sorties vers la méthode _generic_callback_proc . Pour l'objet VATMpad , ceci est fait dans la méthode _set_key_state lors de l'actualisation de la mise en page.

        ce ._setup_event (key_sub, ' mousedown' , 
        ce ._generic_callback_proc);
      
    • Appelez la fonction de rappel. Cela se produit lorsque l'utilisateur "appuie" sur une "touche".

        _generic_callback_proc: fonction (événement)
       {
        ...
        if (val && vkboard.Callback)
        vkboard.Callback (val);
       } 

      Exemple de disposition

Appelez d'au-delà

Une caractéristique naturelle que tous les utilisateurs attendent d'un champ de texte est la possibilité de modifier le texte à n'importe quelle position dans un champ. Cependant, il est impossible de faire avec la fonction. Le script suivant est une tentative d'écriture d'un rappel compatible. Il est basé sur la discussion dans le forum thescripts.com.

  <HEAD>
  <SCRIPT type = " text / javascript" > <! -
  var ouvert = faux ,
  insertionS = -1, // début de la sélection
 
  insertionE = 0 ;  // fin
 
  var userstr = navigator.userAgent.toLowerCase ();
  var safari = (userstr.indexOf ( ' applewebkit' )! = -1);
  var gecko = (userstr.indexOf ( ' gecko' )! = -1) &&! safari;
  var standr = gecko ||  window.opera ||  safari;
  ...
  // Fonction de rappel avancée:
 
  //
   function keyb_callback (ch)
  {
  var val = text.value;
  commutateur (ch)
  {
  case " BackSpace" :
  si (val.length)
  {
  var span = null ;
  if (document.selection)
  span = document.selection.createRange (). duplicate ();
  si (span && span.text.length> 0 )
  {
  span.text = " " ;
  getCaretPositions (texte);
  }
  else deleteAtCaret (texte);
  }
  rompre ;
  cas " <" :
  if (insertionS> 0 )
  setRange (texte, insertionS - 1 , insertionE - 1 );
  rompre ;
  cas " >" :
  if (insertionE <val.length)
  setRange (texte, insertionS + 1 , insertion E + 1 );
  rompre ;
  cas " / \\":
 
   si (! standr) casse;
 
   var prev = val.lastIndexOf (" \ n " , insertionS) + 1;
 
   var pprev = val.lastIndexOf (" \ n " , prev - 2);
 
   var next = val.indexOf (" \ n " , insertionS);
 
   si (next == -1) next = val.length;
 
   var nnext = next - insertionS;
 
   si (prev> suivant)
 
   {
 
   prev = val.lastIndexOf (" \ n " , insertionS - 1) + 1;
 
   pprev = val.lastIndexOf (" \ n " , prev - 2);
 
   }
 
   // nombre de caractères dans la ligne courante à gauche du curseur:
 
   var à gauche = insertionS - prev;
 
   // longueur du prev.
  ligne:
 
   var plen = prev - pprev - 1;
 
   // nombre de caractères dans le prev.
  ligne à
  
   // à droite du signe:
 
   var droit = ​​(plen <= gauche)?
  1: (plen - gauche);
 
   var changement = gauche + droite;
 
   setRange (texte, insertionS - change, insertionE - change);
 
   rompre;
 
   cas " \\ / " :
 
   si (! standr) casse;
 
   var prev = val.lastIndexOf (" \ n " , insertionS) + 1;
 
   var next = val.indexOf (" \ n " , insertionS);
 
   var pnext = val.indexOf (" \ n " , suivant + 1);
 
   si (next == -1) next = val.length;
 
   si (pnext == -1) pnext = val.length;
 
   si (pnext <suivant) pnext = next;
 
   si (prev> suivant)
 
   prev = val.lastIndexOf (" \ n " , insertionS - 1) + 1;
 
   // nombre de caractères dans la ligne courante à gauche du curseur:
 
   var à gauche = insertionS - prev;
 
   // longueur de la ligne suivante:
 
   var nlen = pnext - suivant;
 
   // nombre de caractères dans la ligne suivante à gauche du curseur:
 
   var droit = ​​(nlen <= gauche)?
  0: (nlen - left - 1);
 
   var change = (suivant - insertionS) + nlen - droit;
 
   setRange (texte, insertionS + changement, insertionE + changement);
 
   rompre;
 
   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
 
   // le texte est sélectionné dans la TEXTAREA, les positions de début et de fin
 
   // de la sélection.
 
   //
 
   function getCaretPositions (ctrl)
 
   {
 
   var CaretPosS = -1, CaretPosE = 0;
 
   // façon Mozilla:
 
   if (ctrl.selectionStart || (ctrl.selectionStart == '0'))
 
   {
 
   CaretPosS = ctrl.selectionStart;
 
   CaretPosE = ctrl.selectionEnd;
 
   insertionS = CaretPosS == -1?
  CaretPosE: CaretPosS;
 
   insertionE = CaretPosE;
 
   }
 
   // façon IE:
 
   else if (document.selection && ctrl.createTextRange)
 
   {
 
   var début = fin = 0;
 
   essayer
 
   {
 
   début =
  
   Math.abs (
 
   document.selection.createRange (). moveStart (" caractère " ,
  
   -10000000));
  // commencer
 
   if (début> 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 (" character " , -10000000));
 
   var eTest =
  
   Math.abs (r.moveEnd (" caractère " , -10000000));
 
   if ((ctrl.tagName.toLowerCase ()! = 'entrée') &&
  
   (eTest-endReal == sTest))
 
   start - = sTest;
 
   }
 
   attraper (err) {}
 
   }
 
   }
 
   attraper (e) {}
 
   essayer
 
   {
 
   fin =
  
   Math.abs (
 
   document.selection.createRange (). moveEnd (" caractère " ,
  
   -10000000));
  // fin
 
   if (fin> 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 (" character " , -10000000));
 
   var eTest =
  
   Math.abs (r.moveEnd (" caractère " , -10000000));
 
   if ((ctrl.tagName.toLowerCase ()! = 'entrée') &&
  
   (eTest-endReal == sTest))
 
   fin - = sTest;
 
   }
 
   attraper (err) {}
 
   }
 
   }
 
   attraper (e) {}
 
   insertionS = début;
 
   insertionE = fin
 
   }
 
   }
 
   function setRange (ctrl, début, fin)
 
   {
 
   if (ctrl.setSelectionRange) // Méthode standard (Mozilla, Opera, ...)
 
   {
 
   ctrl.setSelectionRange (début, fin);
 
   }
 
   autre // MS IE
 
   {
 
   var gamme;
 
   essayer
 
   {
 
   range = ctrl.createTextRange ();
 
   }
 
   attraper (e)
 
   {
 
   essayer
 
   {
 
   range = document.body.createTextRange ();
 
   range.moveToElementText (ctrl);
 
   }
 
   attraper (e)
 
   {
 
   range = null;
 
   }
 
   }
 
   if (! range) renvoie;
 
   range.collapse (true);
 
   range.moveStart (" caractère " , début);
 
   range.moveEnd (" caractère " , fin - début);
 
   range.select ();
 
   }
 
   insertionS = début;
 
   insertionE = fin;
 
   }
 
   function deleteSelection (ctrl)
 
   {
 
   if (insertionS == insertionE) renvoie;
 
   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);
 
   }
 
   function 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 du texte à la position du curseur:
 
   //
 
   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 boolean canBubbleArg,
 
   true, // dans boolean cancelableArg,
 
   null, // dans nsIDOMAbstractView viewArg,
 
   false, // dans boolean ctrlKeyArg,
 
   false, // en boolean altKeyArg,
 
   false, // dans boolean shiftKeyArg,
 
   false, // dans boolean metaKeyArg,
 
   null, // code clé;
 
   val.charCodeAt (0));
  // code de char.
 
   ctrl.dispatchEvent (e);
 
   }
 
   }
 
   autre chose
 
   {
 
   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>
 
   ...
 
   <- N'oublie pas 'onclick' et 'onkeyup': ->
 
   <TEXTAREA onkeyup = " getCaretPositions ( this ); " onclick = " getCaretPositions ( this ); " id = " textfield " lignes = " 12 " cols = " 50 " >
 
   </ TEXTAREA>
 
   ...
 
  </ BODY>
 

Notez que les flèches haut et bas sur les navigateurs compatibles standard! Tenez-en compte lors de la création d'applications à écran tactile. Vous pouvez tester le script ci-dessus en exécutant le fichier 2-edit-full.html dans le dossier vkboard de l' archive attachée jointe. Le rappel de base est affiché dans 1-edit-simple.html .

Trucs et astuces

Le flux de script est assez simple, alors j'espère que ce ne sera pas difficile de s'y plonger. Voici quelques mots sur quelques endroits difficiles.

  • Configuration de l'événement Nous devons gérer les modèles d'événements DOM MS IE et W3C.

      _setup_event: fonction (elem, eventType, handler)
     {
      return (elem.attachEvent? // MS IE façon
     
      elem.attachEvent ( " on" + eventType, gestionnaire):
      ((elem.addEventListener)? // Méthode W3C
     
      elem.addEventListener (eventType, handler, false ): null ));
     } 
  • Configuration du conteneur de clé. Chaque clé se compose de la DIV "extérieure", où nous définissons les paramètres haut, gauche, largeur et hauteur seulement - et la DIV "intérieure", qui accepte le remplissage, la couleur de la bordure et d'autres paramètres. Nous utilisons une construction si complexe. Notez qu'il y a la solution JavaScript. Mousse de Trenton (voir l'article 6) Si vous voulez éviter le modèle de boîte, utilisez Trenton Moss (voir article 6).

      _setup_key: fonction (parent, id, haut, gauche, largeur, hauteur,
      text_align, line_height, font_size,
      font_weight, padding_left, padding_right)
     {
      var existe = document.getElementById (id);
      // DIV externe:
     
      var clé = 
      existe?  exists.parentNode: document.createElement ( " DIV" );
      ce ._setup_style (clé, 
      ! existe, haut, gauche, largeur, hauteur, " absolu" );
      // DIV intérieure:
     
      var key_sub = existe?  existe: document.createElement ( " DIV" );
      key.appendChild (key_sub);  parent.appendChild (clé);
      ce ._setup_style (key_sub, 
      ! exists, " " , " " , " " , line_height, " relative" ,
      text_align, line_height, font_size, font_weight,
      padding_left, padding_right);
      key_sub.id = id;
      return key_sub;
     } 
  • Désactivation de la sélection de contenu Celui-ci est très important en raison de la vitesse de frappe très élevée que certaines personnes peuvent atteindre et, par conséquent, de la sélection inévitable du contenu des touches. Il peut être utilisé à la place des UNSELECTABLE (MS IE) et -moz-user-select (navigateurs basés sur Gecko).

      ce ._setup_event (kb_main, " selectstart" ,
      fonction (événement) 
      { 
      return false ; 
      });
     ce ._setup_event (kb_main, " mousedown" ,
      fonction (événement) 
      { 
      if (event.preventDefault)
      event.preventDefault (); 
      return false ; 
      });
    

Code

Fonctionnalités du clavier virtuel en un coup d'œil

  • Une boîte à outils JavaScript complète permettant de simuler tous les aspects d'un véritable périphérique de clavier
  • Script compact (42,8 Ko - version complète compressée) ne nécessitant aucune image, pour un téléchargement plus rapide
  • Fonctionne de la même manière sur tous les navigateurs courants, testé sur Mozilla Firefox 1.5 / 2, Opera 7.5 / 9.22, Safari 3, MS IE 6/7
  • Procédure de configuration très simple
  • Autonome, sans dépendances externes
  • Police personnalisable, taille de police et couleurs; parfait pour les environnements skinables
  • Plusieurs variantes sont disponibles, y compris le clavier complet, le clavier complet mince, le pavé numérique et le pavé numérique de type ATM
  • Les scripts compressés sont regroupés, c.-à-d. Script complet: 42,8 Ko, mince: 43 Ko, pavé numérique: 9,30 Ko, atm-pavé numérique: 8,62 Ko
  • Dix configurations de clavier fréquemment utilisées sont regroupées avec les scripts complets et minces, 24 autres mises en page sont incluses dans le pack de mise en page fourni
  • Des options d'installation flexibles, c.-à-d. Un nombre quelconque de v-claviers par page, des rappels ajustables
  • Script open-source distribué sous licence zlib / libpng, ce qui signifie qu'il peut être utilisé gratuitement même sur des sites

Conditions de script

Tout navigateur averti de:

  • JavaScript (implémentation compatible avec ECMAScript Edition 3)
  • W3C DOM niveau 1
  • CSS Niveau 1 (au moins, la plupart des éléments)
  • Modèle d'événement W3C ou MS IE