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

Clavier virtuel JavaScript

Clavier virtuel lié à un champ TEXTAREA

Introduction

E-mails familiaux à Athènes. C'est bien si quelqu'un de votre famille parle anglais. Si vous ne trouvez pas un clavier avec une disposition grecque? J'aimerais avoir un autre clavier. Cet article présente le clavier virtuel qui résout ce problème de convivialité. Il peut être énoncé comme suit:

  • Ceci est une adresse électronique basée sur le Web.
  • Capteur - ordinateurs de poche, smartphones, etc. - ou avec des télécommandes telles que souris, stylos électroniques, etc. être les seuls périphériques d'entrée.
  • Protégez les utilisateurs des logiciels espions de type enregistreur de frappe.

L'installation du clavier virtuel nécessite une connaissance occasionnelle de HTML et de JavaScript. WOMC 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 la licence zlib / libpng.

Configuration

Six étapes faciles:

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

  2. Choisissez votre installation:

    • vkboard.js (le dossier 1-vkboard de 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) clavier gauche du clavier. Menu déroulant, comme dans la variante précédente.

      Capture d'écran - jvk-slim.jpg

    • Si vous avez un écran tactile (UMPC, kiosque à écran tactile, etc.) ou si vous avez 4 dispositions ou plus installées

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

      variante pavé numérique

    • vatmpad.js (dossier 4-numpad_atm) est un nombre enlevé.

      variante numpad_atm

  3. Incluez ce lien dans votre page HTML.
     < HTML > < HEAD > < SCRIPT type =" text/javascript" src =" vkboard.js" > </ SCRIPT > ... < / HEAD > ... 

    Deux fichiers de script sont disponibles:

    • vkboard.js / vkboards.js / vnumpad.js / vatmpad.js sont le script d'origine. Si vous cherchez quelque chose à faire.
    • vkboardc.js / vkboardsc.js / vnumpadc.js / vatmpadc.js est une version compressée du script, respectivement 30,5% / 30,5% / 39,8% / 39,5% inférieure à 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 > < SCRIPT > // Fonction de rappel minimal:
      fonction keyb_callback ( char ) {
      // Lions 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);
      pause
      case " Enter" :
      text.value + = " \ n" ;
      pause
      défaut:
      text.value + = ch;
      }
      }
      </ SCRIPT > < / HEAD >
    
      ... 

    La fonction de rappel doit avoir un ou deux paramètres. C'est le premier paramètre du script vkeyboard. Le deuxième paramètre est qu'il s'appelle le rappel. Cela peut être utile pour plusieurs vkeyboards. Notez qu'il s'agit de la fonction de rappel la plus élémentaire. Un exemple d'extrait de code plus avancé est donné plus tard .

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

    Bien entendu, la création d'un VKeyboard est un pavé numérique: VNumpad , style ATM, un pavé numérique: VATMpad .

API

Il vous VKeyboard à contrôler votre constructeur VKeyboard . Voici la liste des valeurs par défaut.

 var vkb = new VKeyboard( " keyboard" , //  container's id, mandatory keyb_callback , //  reference to callback function, mandatory //  (this & following parameters are optional) true , //  create the arrow keys or not? true , //  create up and down arrow keys? false , //  reserved true , //  create the numpad or not? " " , //  font name ("" == system default) " 14px" , //  font size in px " #000" , //  font color " #F00" , //  font color for the dead keys " #FFF" , //  keyboard base background color " #FFF" , //  keys' background color " #DDD" , //  background color of switched/selected item " #777" , //  border color " #CCC" , //  border/font color of "inactive" key //  (key with no value/disabled) " #FFF" , //  background color of "inactive" key //  (key with no value/disabled) " #F77" , //  border color of language selector's cell true , //  show key flash on click? (false by default) " #CC3300" , //  font color during flash " #FF9966" , //  key background color during flash " #CC3300" , //  key border color during flash false , //  embed VKeyboard into the page? true , //  use 1-pixel gap between the keys? 0 ); //  index (0-based) of the initial layout 

S'il vous plaît soyez prudent lors de la mise à niveau de vkeyboard à partir de versions antérieures. Toujours vérifier le nombre / flux des paramètres. VNumpad et VATMpad ont un ensemble limité de paramètres:

 var vkb = new VNumpad( " numpad" , //  container's id, mandatory pad_callback , //  reference to the callback function, mandatory " " , //  font name ("" == system default) //  (this and following parameters are optional) " 14px" , //  font size in px " #000" , //  font color " #FFF" , //  keyboard base background color " #FFF" , //  keys' background color " #777" , //  border color true , //  show key flash on click? (false by default * ) " #CC3300" , //  font color for flash event " #FF9966" , //  key background color for flash event " #CC3300" , //  key border color for flash event false , //  embed VNumpad into the page? true ); //  use 1-pixel gap between the keys? 

Ce n'est pas autorisé par défaut. VKeyboard a les méthodes publiques suivantes.

  • Show : Affiche ou masque tout le vkeyboard. C'est une valeur booléenne.
      vkb.Show ( true );  // Affiche le vkeyboard
     
      vkb.Show ( false );  // cache le vkeyboard
     
      vkb.Show ();  // Affiche à nouveau le vkeyboard.
      L'action est par défaut.
     
  • ShowNumpad : Affiche ou masque le pavé numérique. C'est une valeur booléenne qui indique s'il faut afficher ou masquer.
      vkb.ShowNumpad ( true );  // Affiche le pavé numérique
     
      vkb.ShowNumpad ( false );  // cache 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 lors de l'exécution. La fonction accepte le nombre de valeurs par paires: le nom du paramètre vkeyboard et la valeur du paramètre.
      // Réglage d'un seul paramètre:
     
      vkb.SetParameters ( " font-color" , " # F0A050" );
     // Ajuster deux paramètres à la fois:
     
      vkb.SetParameters ( " nom de la police" , " Arial" , " couleur de la police" , " # F0A050" ); 

    Les noms de paramètres valides sont:

    • callback - référence de la fonction de rappel. Valeur des paramètres avec 1 ou 2 paramètres formels
    • font-name - nom de la police du clavier. Valeur de paramètre valide: chaîne de nom vide (= police par défaut)
    • font-size police - font-size police en pixels. Valeur de paramètre valide: taille de la police en pixels
    • font-color - couleur de la police. Voici un chiffre hexadécimal valide
    • dead-color - couleur des touches mortes
    • base-color - couleur de la base du clavier
    • key-color - couleur des touches
    • selection-color
    • border-color - couleur de la bordure de clé
    • inactive-border-color
    • inactive-key-color - couleur d'arrière-plan de la clé désactivée
    • lang-cell-color - langue
    • click-font-color -border
    • click-key-color - couleur
    • click-border-color
    • show-click - affiche la clé au clic. Valeur de paramètre valide: true ou false
    • layout - index (entier basé sur 0) de la mise en page vers laquelle basculer. Utilisez-le pour changer de mise en page par programme

Suite de test

Le script est fourni avec les exemples suivants:

  1. 1-edit-simple.html . Clavier virtuel.

  2. 2-edit-full.html . Ce n'est pas une fonction. Si vous êtes sur le TEXTAREA , vous pouvez l’utiliser. Cet exemple montre comment utiliser normalement le clavier virtuel JavaScript. Tous les autres échantillons sont dérivés de celui-ci.

  3. 3-edit-translator.html . Si vous voulez utiliser votre clavier C’est un vrai clavier, pas une souris. Les caractères ne seront pas saisis dans vkeyboard.

  4. 4-test-change.html . Exemple d'API. 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 tous les champs sont autorisés à être là. Où peuvent les changements de page sont indésirables.

  7. 7-test-any-css.html . Exemples de spectacles. Une fonction spéciale, convert_to_px , est utilisée pour convertir les chaînes d'unités arbitraires en valeurs en 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. C'est un moyen pour le navigateur de le distribuer. Il peut être utilisé en toute sécurité. Points par pouce - il est assez commun pour les machines Windows.

  8. 8-test-scale.html . Ceci est un exemple du problème des navigateurs mozilla et MS IE. Il s'agit de zooms, c'est-à-dire que cela signifie que la taille de la font-size . Ce n’est pas un problème. Dans cet exemple, le script suit la font-size la font-size et utilise l'API SetParameters pour SetParameters à l'échelle la présentation de vkeyboard. Cet exemple doit être visualisé uniquement dans Mozilla (Firefox) et MS IE. Ce n’est pas un problème. Vous pouvez également surmonter les navigateurs wrapper. Par exemple, MyIE2 (Maxthon) implémente également un zoom intelligent. Il existe également un comportement de zoom de page semblable à Opera.

On peut le trouver dans le dossier d’archives. Ce n’est pas un problème.

Créer votre propre mise en page

Deux étapes faciles:

  • C'est une règle de droit qu'il s'agisse d'une avail_langs .
      avail_langs:
      [[ " Nous" , " English (US)" ],
      [ " Ca" , " Canadien" ],
      [ " Ru" , " & # xo420; & # x0443; & # x0441;"
      +
      " & # x0441; & # x043A; & # x0438; & # x0439;"
      ],
      [ " De" , " Deutsch" ],
      [ " Fr" , " Fran & # x00E7; ais" ],
      [ " Es" , " Espa & # x00F1; ol" ],
      [ " It" , " Italiano" ],
      [ " Cz" , "" # # esky " ] ,
      [ " El" , " & # x0388; & # x03BB; & # x03BB;"
      + 
      " & # x03B7; & # x03BD; & # x03B1; & # x03C2;"
      ],
      [ " He" , " & # x05E2; & # x05D1; & # x05E8; & # x05D9; & # x05EA" "
      ]]; 
  • Définissez les tableaux "normal" et éventuellement "Caps Lock", "Shift", "AltGr" et "AltGr + Shift". Les règles suivantes s'appliquent:
    • Chaque symbole de soulignement.
    • Caps Lock "doit être avec des majuscules."
        // mise en page tchèque:
       
        Cz_caps: [ " & # x003B;"
        , ..., " & # x002D;"
        ]; 
    • Le clavier avec "Shift" enfoncé doit se terminer par "Shift".
        Cz_shift: [ " & # x00BA;"
        , ..., " & # x005F;"
        ]; 
    • "AltGr" pressé doit se terminer par "alt_gr."
        Cz_alt_gr: [..., " & # x0021;"
        , " & # x002F;"
        ]; 
    • Les touches "AltGr" et "Shift" sont les touches pour terminer avec "alt_gr_shift".
        Cz_alt_gr_shift: [ " & # x007E;"
        , ..., " & # x003F;"
        ]; 
    • Si vous êtes sur le clavier, vous devrez appuyer sur la touche "normal".
        Cz_normal: [ " & # x003B;"
        , ..., " & # x002D;"
        ]; 
    • Voici les tableaux:
      • Acute (?)
      • Breve (˘)
      • Caron (ˇ)
      • Cedilla (?)
      • Circumflex (^)
      • DialytikaTonos (΅, tonalités dialytiques, aigus combinés + un tréma)
      • DotAbove (, point ci-dessus)
      • DoubleAcute (˝, double aigu)
      • Grave (`)
      • Ogonek ( Ogonek )
      • RingAbove (°, ring above)
      • Tilde (~)
      • Umlaut (?)

      En outre, le tableau diacritique Macron (rit) est disponible via le fichier macron.txt . Ce n'est pas une clé morte.

        Cz_alt_gr: [ [ " & # x0060;"
        , " Grave" ] , // touche morte
       
        " & # x0021;"
        , ... // clé simple
       
    • Les tableaux sont mappés conformément aux illustrations suivantes, où se trouvent les indices de tableau.

      mappage tableau à clé

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

    Les dispositions suivantes sont intégrées aux options de clavier complet et mince. Voici la présentation de la base de données IBM Globalization:

    24 autres mises en page sont disponibles dans les archives . Il comprend:

    Veuillez consulter le fichier readme.txt dans les mises en page.

Créer votre propre 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 pour plus de détails. En bref, le 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 = " block" ;
       ct.style.position = " absolute" ;
       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 = " 1px solide" + bc;
       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;
      
       ... 
    • Créez les clés avec la méthode _setup_key .

        var kb_pad_7 = this ._setup_key (kb_main, " 1px" , 
        " 1px" , cp, cp, bc, c, lh, fs);
       kb_pad_7.sub.innerHTML = " 7" ;
       kb_pad_7.sub.id = conteneur_id + " ___pad_7" ; 
    • _generic_callback_proc toutes les sorties vers la méthode _generic_callback_proc . Pour l'objet VATMpad , cette opération est effectuée dans la méthode _set_key_state lors de l'actualisation de la présentation.

        this ._setup_event (key_sub, ' mousedown' , 
        this ._generic_callback_proc);
      
    • Invoquer 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 mise en page

Appeler de plus loin

C'est un problème naturel. Cependant, ce n'est pas possible. Ce qui suit est un script. Il est largement basé sur la discussion dans le forum thecripts.com.

  <HEAD>
  <SCRIPT type = " text / javascript" > <! -
  var open = false ,
  insertionS = -1, // début de la sélection
 
  insertionE = 0 ;  // fin de la 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;
  ...
  // Fonction de rappel avancée:
 
  //
   fonction keyb_callback (ch)
  {
  var val = text.value;
  commutateur (ch)
  {
  case " BackSpace" :
  si (valeur.longueur)
  {
  var span = null ;
  if (document.selection)
  span = document.selection.createRange (). duplicate ();
  if (span && span.text.length> 0 )
  {
  span.text = " " ;
  getCaretPositions (text);
  }
  else deleteAtCaret (text);
  }
  pause

  case " <" :
  si (insertionS> 0 )
  setRange (texte, insertionS- 1 , insertionE- 1 );
  pause

  case " >" :
  if (insertionE <valeur.longueur)
  setRange (texte, insertionS + 1 , insertionE + 1 );
  pause

  case " / \\":
 
   si (! standr) pause;
 
   var prev = val.lastIndexOf (" \ n " , insertionS) + 1;
 
   var pprev = val.lastIndexOf (" \ n " , prev-2);
 
   var next = val.indexOf (" \ n " , insertionS);
 
   if (next == -1) next = val.length;
 
   var nnext = next - insertionS;
 
   si (prev> next)
 
   {
 
   prev = val.lastIndexOf (" \ n " , insertionS - 1) + 1;
 
   pprev = val.lastIndexOf (" \ n " , prev-2);
 
   }
 
   // nombre de caractères dans la ligne du curseur
 
   var left = insertionS - prev;
 
   // longueur de la prev.
  ligne:
 
   var plen = prev - pprev - 1;
 
   // nombre de caractères dans le prev.
  ligne à
  
   // le droit du curseur:
 
   var right = (plen <= left)?
  1: (plen - left);
 
   var change = left + right;
 
   setRange (texte, insertionS - changement, insertionE - changement);
 
   pause
 
   case " \\ / " :
 
   si (! standr) pause;
 
   var prev = val.lastIndexOf (" \ n " , insertionS) + 1;
 
   var next = val.indexOf (" \ n " , insertionS);
 
   var pnext = val.indexOf (" \ n " , next + 1);
 
   if (next == -1) next = val.length;
 
   if (pnext == -1) pnext = val.length;
 
   if (pnext <next) pnext = next;
 
   si (prev> next)
 
   prev = val.lastIndexOf (" \ n " , insertionS - 1) + 1;
 
   // nombre de caractères dans la ligne du curseur
 
   var left = insertionS - prev;
 
   // longueur de la ligne suivante:
 
   var nlen = pnext - next;
 
   // nombre de caractères
 
   var right = (nlen <= left)?
  0: (nlen - left - 1);
 
   var change = (next - insertionS) + nlen - right;
 
   setRange (texte, insertionS + changement, insertionE + changement);
 
   pause
 
   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 (curseur), ou, si
 
   // le texte est sélectionné dans TEXTAREA, les positions de début et de fin
 
   // de la sélection.
 
   //
 
   fonction 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;
 
   }
 
   // IE façon:
 
   else if (document.selection && ctrl.createTextRange)
 
   {
 
   var start = end = 0;
 
   essayer
 
   {
 
   commencer =
  
   Math.abs (
 
   document.selection.createRange (). moveStart (" character " ,
  
   -10000000));
  // commence
 
   si (début> 0)
 
   {
 
   essayer
 
   {
 
   var endReal =
  
   Math.abs (
 
   ctrl.createTextRange (). moveEnd (" character " ,
  
   -10000000));
 
   var r = document.body.createTextRange ();
 
   r.moveToElementText (ctrl);
 
   var sTest =
  
   Math.abs (r.moveStart (" character " , -10000000));
 
   var eTest =
  
   Math.abs (r.moveEnd (" character " , -10000000));
 
   if ((ctrl.tagName.toLowerCase ()! = = input ') &&
  
   (eTest - endReal == sTest))
 
   start - = sTest;
 
   }
 
   catch (err) {}
 
   }
 
   }
 
   catch (e) {}
 
   essayer
 
   {
 
   fin =
  
   Math.abs (
 
   document.selection.createRange (). moveEnd (" character " ,
  
   -10000000));
  // fin
 
   si (fin> 0)
 
   {
 
   essayer
 
   {
 
   var endReal =
  
   Math.abs (
 
   ctrl.createTextRange (). moveEnd (" character " ,
  
   -10000000));
 
   var r = document.body.createTextRange ();
 
   r.moveToElementText (ctrl);
 
   var sTest =
  
   Math.abs (r.moveStart (" character " , -10000000));
 
   var eTest =
  
   Math.abs (r.moveEnd (" character " , -10000000));
 
   if ((ctrl.tagName.toLowerCase ()! = = input ') &&
  
   (eTest - endReal == sTest))
 
   end - = sTest;
 
   }
 
   catch (err) {}
 
   }
 
   }
 
   catch (e) {}
 
   insertionS = start;
 
   insertionE = fin
 
   }
 
   }
 
   fonction setRange (ctrl, début, fin)
 
   {
 
   if (ctrl.setSelectionRange) // Manière standard (Mozilla, Opera, ...)
 
   {
 
   ctrl.setSelectionRange (début, fin);
 
   }
 
   sinon // MS IE
 
   {
 
   gamme var;
 
   essayer
 
   {
 
   range = ctrl.createTextRange ();
 
   }
 
   attraper (e)
 
   {
 
   essayer
 
   {
 
   range = document.body.createTextRange ();
 
   range.moveToElementText (ctrl);
 
   }
 
   attraper (e)
 
   {
 
   gamme = null;
 
   }
 
   }
 
   si (! range) retourne;
 
   range.collapse (true);
 
   range.moveStart (" character " , début);
 
   range.moveEnd (" character " , fin - début);
 
   range.select ();
 
   }
 
   insertionS = start;
 
   insertionE = fin;
 
   }
 
   fonction 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);
 
   }
 
   fonction deleteAtCaret (ctrl)
 
   {
 
   si (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.sous chaîne (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 la valeur booléenne cancelableArg,
 
   null, // dans nsIDOMAbstractView viewArg,
 
   false, // dans le booléen ctrlKeyArg,
 
   false, // dans booléen altKeyArg,
 
   false, // dans boolean shiftKeyArg,
 
   false, // dans le métaKeyArg booléen,
 
   null, // code clé;
 
   val.charCodeAt (0));
  // code de caractère.
 
   ctrl.dispatchEvent (e);
 
   }
 
   }
 
   sinon
 
   {
 
   var tmp =
  
   (document.selection &&
  
   ! window.opera)?
  ctrl.value.replace (/ \ r / g, " " ): ctrl.value;
 
   ctrl.value =
  
   tmp.sous chaîne (0,
  
   insertionS) + val + tmpsubstring (insertionS,
 
   tmp.length);
 
   }
 
   setRange (ctrl, insertionS + val.length, insertionS + val.length);
 
   }
 
   // -> </ SCRIPT>
 
  </ Head>
 
  <CORPS>
 
   ...
 
   <- N'oubliez pas ces 'onclick' et 'onkeyup': ->
 
   <TEXTAREA onkeyup = " getCaretPositions ( this ); " onclick = " getCaretPositions ( this ); " id = " textfield " rows = " 12 " cols = " 50 " >
 
   </ TEXTAREA>
 
   ...
 
  </ Body>
 

Le clavier ne fonctionne que sur les navigateurs conformes aux normes! Tenez-en compte lors de la création d'applications à écran tactile. Vous pouvez tester le script pour l' archive jointe. Le rappel de base est présenté dans 1-edit-simple.html .

Trucs et astuces

Le déroulement du script est assez simple, alors je l’ai compris. Voici quelques endroits difficiles.

  • Organisation de l'événement . Nous devons gérer à la fois les modèles d’événement MS IE et W3C DOM.

      _setup_event: fonction (elem, eventType, handler)
     {
      return (elem.attachEvent? // MS IE way
     
      elem.attachEvent ( " on" + eventType, gestionnaire):
      ((elem.addEventListener)? // de manière W3C
     
      elem.addEventListener (eventType, handler, false ): null ));
     } 
  • Configuration du conteneur de clé. Chaque clé est l'endroit où la clé est définie. Le problème des navigateurs modernes. Notez qu'il existe une solution javascript. Trenton Moss (voir le point 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:
     
      clé var = 
      existe?  exist.parentNode: document.createElement ( " DIV" );
      ce ._setup_style (clé, 
      existe, en haut, à gauche, largeur, hauteur, " absolu" );
      // DIV interne:
     
      var key_sub = existe?  existe: document.createElement ( " DIV" );
      key.appendChild (key_sub);  parent.appendChild (clé);
      ce ._setup_style (key_sub, 
      ! existe, " " , " " , " " , hauteur_ligne, " relatif" ,
      text_align, line_height, font_size, font_weight,
      padding_left, padding_right);
      key_sub.id = id;
      return key_sub;
     } 
  • Désactiver la sélection du contenu. Il est très important que vous puissiez y parvenir. Il peut être utilisé à la place des UNSELECTABLE (MS IE) et -moz-user-select (navigateurs basés sur Gecko).

      this ._setup_event (kb_main, " selectstart" ,
      fonction (événement) 
      { 
      retourne faux ; 
      });
     this ._setup_event (kb_main, " mousedown" ,
      fonction (événement) 
      { 
      if (event.preventDefault)
      event.preventDefault (); 
      retourne faux ; 
      });
    

Code

Fonctions du clavier virtuel en un coup d'œil

  • Un toolkit complet en javascript
  • Script compact (42,8 Ko - variante intégrale compressée)
  • Mozilla Firefox 1.5 / 2, Opera 7.5 / 9.22, Safari 3, MS IE 6/7
  • Procédure d'installation très simple
  • Dépendances externes
  • Police, taille et couleurs de police personnalisables; parfait pour les environnements skinables
  • Plusieurs variantes sont disponibles, y compris pavé numérique et pavé numérique de style ATM
  • Les scripts compressés sont fournis, c’est-à-dire le script complet: 42,8 Ko, slim: 43 Ko, pavé numérique: 9,30 Ko, atm-pavé numérique: 8,62 Ko
  • Les dispositions de clavier sont fréquemment utilisées, et ce sont 24 dispositions de touches.
  • Options d'installation flexibles, rappels de page ajustables
  • Il peut être utilisé gratuitement

Exigences de script

Tout navigateur conscient de:

  • JavaScript (implémentation conforme à 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