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

JavaScript virtuelle Tastatur

Virtuelle Tastatur, die an ein TEXTAREA-Feld gebunden ist

Einleitung

Stellen Sie sich vor, Sie sitzen in einem Londoner Internetcafe und möchten Ihrer Familie, die in Athen lebt, eine E-Mail schreiben. Es ist gut, wenn jemand in deiner Familie Englisch spricht. Wenn nicht, wo würden Sie eine Tastatur mit einem griechischen Layout finden? Ich bin mir sicher, dass Sie sich an ein Dutzend Situationen erinnern können, wenn Sie dachten: "Ich wünschte, ich hätte eine andere Tastatur." Dieser Artikel beschreibt die virtuelle Tastatur, die dieses Usability-Problem löst. Die Design-Aufgabe dafür kann wie folgt spezifiziert werden:

  • Zulassen von Texteingaben von Computern, auf denen das Layout der Muttersprache des Benutzers nicht installiert ist, so dass nationale und mehrsprachige Schnittstellen erstellt werden können, z. B. webbasierte E-Mail.
  • Texteingabe von Computern ohne Tastaturen oder mit Sensorbildschirmen zulassen - Handheld-PCs, Smartphones usw. - oder mit Fernbedienungen wie Mäusen, E-Stiften usw. die einzigen Eingabegeräte sein.
  • Schützen Sie Benutzer vor Keylogger-Spyware.

Die Installation der virtuellen Tastatur erfordert ein gelegentliches Wissen über HTML und JavaScript. W3C DOM Level 1, CSS Level 1 und das DOM / Microsoft Internet Explorer-Ereignismodell. Virtual Keyboard ist ein Open-Source-Skript, das unter der zlib / libpng-Lizenz vertrieben wird.

Einrichtung

Sechs einfache Schritte:

  1. Laden Sie das Quellarchiv herunter.

  2. Wählen Sie Ihre Installation:

    • vkboard.js ( 1-vkboard- Ordner im Archiv) ist das primäre Skript. Die vollständige Tastatur wird wie folgt simuliert:

      Screenshot - jvk-full.jpg

    • vkboards.js (Ordner 2-vkboard_slim) ist fast identisch mit dem vorherigen, aber das Sprachmenü, auf das durch Klicken auf das rote Rechteck in der linken unteren Ecke der Tastatur zugegriffen werden kann. Die Zellen sind in Reihen angeordnet, nicht als einfaches Dropdown-Menü wie in der vorherigen Variante.

      Bildschirmfoto - jvk-slim.jpg

    • Diese Installation wird empfohlen, wenn Sie wenig Platz haben (UMPC, Touchscreen-Kiosk usw.) oder wenn Sie 4 oder mehr Layouts installiert haben

    • vnumpad.js (3-numpad_full-Ordner) ist der Numpad-Teil der Tastatur.

      Nummernblock-Variante

    • vatmpad.js (Ordner 4-numpad_atm) ist ein entfernter Nummernblock, der nur die Eingabetaste und die Zifferntasten enthält.

      numpad_atm Variante

  3. Fügen Sie einen Verweis auf die ausgewählte Skriptdatei in Ihre HTML-Seite ein.
      < HTML > < HEAD > < SCRIPT type = " text / javascript" src = " vkboard.js" > </ SCRIPT > ...
      < / Kopf >
    
    
      ... 

    Beachten Sie, dass für jeden Installationstyp zwei Skriptdateien verfügbar sind:

    • vkboard.js / vkboards.js / vnumpad.js / vatmpad.js sind das ursprüngliche Skript. Wenn Sie das Skript ändern oder einfach nur lernen möchten, es zu verwenden.
    • vkboardc.js / vkboardsc.js / vnumpadc.js / vatmpadc.js ist eine komprimierte Version des Skripts, jeweils 30,5% / 30,5% / 39,8% / 39,5% kleiner als das Original. Dies ist die Datei, die Sie im Internet verwenden sollten.
  4. Definieren Sie eine Rückruffunktion:

      < HTML > < HEAD > < SCRIPT type = " text / javascript" src = " vkboard.js" > </ SCRIPT > < SCRIPT > // Minimale Callback-Funktion:
      Funktion keyb_callback ( char ) {
      // Lassen Sie vKeyboard an den <TEXTAREA> binden
     
      // mit id = " textfield" :
      var text = 
      document.getElementById ( " Textfeld" ), val = text.value;
      wechseln (ch)
      {
      Fall " BackSpace" :
      var min = (val.charCodeAt (val.Länge - 1 ) == 10 )?  2 : 1;
      text.value = valsub (0, val.length - min);
      Pause;
      Fall " Enter" :
      text.value + = " \ n" ;
      Pause;
      Standard:
      text.value + = ch;
      }
      }
      </ SCRIPT > < / HEAD >
    
      ... 

    Die Callback-Funktion muss einen oder zwei Parameter haben. Der erste Parameter ist obligatorisch und akzeptiert einen vom vkeyboard-Skript zurückgegebenen Zeichenfolgenwert. Der zweite Parameter ist optional und akzeptiert die id des Containers des vkeyboard. Es kann nützlich sein, wenn Sie eine einzelne Callback-Funktion an mehrere vkeyboards binden. Beachten Sie, dass dies die grundlegendste Rückruffunktion ist. Ein Beispiel für ein fortgeschritteneres Code-Snippet wird später gegeben .

  5. Definieren Sie einen Container für die Tastatur, der ein leerer DIV oder SPAN .
      < HTML > ...
      < KÖRPER > ...
      < TEXTAREA id = " Textfeld " rows = " 10" Spalten = " 50" > < / TEXTAREA > < DIV ID = " Tastatur" > < / DIV > < / BODY > < / HTML >
     
  6. Zeigen Sie schließlich die Tastatur.
      < BODY onload = " neues VKeyboard (" keyboard ", keyb_callback);" > <! - VKeyboard wird beim Laden angezeigt, gebunden an Container mit
     
       id = "keyboard" und mit Callback-Funktion "keyb_callback" ->
     

    Natürlich kann die Erstellung von VKeyboard - Numpad: VNumpad , ATM-Stil Numpad: VATMpad - überall verwendet VATMpad kann.

API

Der Konstruktor des VKeyboard verfügt über eine Vielzahl von Parametern, mit denen Sie das Aussehen und VKeyboard steuern können. Hier ist die vollständige Liste zusammen mit Parameterstandards.

  var vkb = 
  neues VKeyboard ( " keyboard" , // Container-ID, obligatorisch)
 
  keyb_callback , // Verweis auf Callback-Funktion, obligatorisch
 
  // (Dies und die folgenden Parameter sind optional)
 
  true , // Erstelle die Pfeiltasten oder nicht?
 
  Wahr , // Erstellen Sie die Pfeiltasten nach oben und unten?
  
  falsch , // reserviert
  
  true , // Erstelle das Numpad oder nicht?
 
  " " , // Schriftname ("" == Systemstandard)
 
  " 14px" , // Schriftgröße in px
 
  " # 000" , // Schriftfarbe
 
  " # F00" , // Schriftfarbe für die toten Tasten
 
  " #FFF" , // Hintergrundfarbe der Tastatur
 
  " #FFF" , // Schlüssel 'Hintergrundfarbe
 
  " #DDD" , // Hintergrundfarbe des geschalteten / ausgewählten Objekts
 
  " # 777" , // Rahmenfarbe
 
  " #CCC" , / / Grenze / Schriftfarbe der "inaktiven" Taste
 
  // (Schlüssel ohne Wert / deaktiviert)
 
  " #FFF" , // Hintergrundfarbe des "inaktiven" Schlüssels
 
  // (Schlüssel ohne Wert / deaktiviert)
 
  " # F77" , // Rahmenfarbe der Sprachauswahlzelle
 
  true , // show flash on click?
  (standardmäßig falsch)
 
  " # CC3300" , // Schriftfarbe während des Flash
 
  " # FF9966" , // Hintergrundfarbe während des Blitzes
 
  " # CC3300" , // Schlüsselrandfarbe während des Blitzes
 
  false , // VKeyboard in die Seite einbetten?
 
  Wahr , // verwende 1 Pixel Abstand zwischen den Tasten?
 
  0 );  // Index (0-basiert) des ursprünglichen Layouts
 

Bitte seien Sie vorsichtig beim Upgrade von vkeyboard von früheren Versionen. Überprüfen Sie immer die Anzahl / den Fluss der Parameter. VNumpad und VATMpad haben eine begrenzte VATMpad von Parametern:

  var vkb = 
  neuer VNumpad ( " numpad" , // Container-ID, obligatorisch
 
  pad_callback , // Verweis auf die Callback-Funktion, obligatorisch
 
  " " , // Schriftname ("" == Systemstandard)
 
  // (Dieser und die folgenden Parameter sind optional)
 
  " 14px" , // Schriftgröße in px
 
  " # 000" , // Schriftfarbe
 
  " #FFF" , // Hintergrundfarbe der Tastatur
 
  " #FFF" , // Schlüssel 'Hintergrundfarbe
 
  " # 777" , // Rahmenfarbe
 
  true , // show flash on click?
  (standardmäßig falsch * )
 
  " # CC3300" , // Schriftfarbe für Flash-Ereignis
 
  " # FF9966" , // Schlüsselhintergrundfarbe für Flash-Ereignis
 
  " # CC3300" , // Schlüsselrandfarbe für Flash-Ereignis
 
  false , // VNumpad in die Seite einbetten?
 
  wahr );  // verwende 1-Pixel-Lücke zwischen den Tasten?
 

Beachten Sie, dass "Blitzschalter" zwar ausgeschaltet ist, aber eingeschaltet ist. VKeyboard verfügt über die folgenden öffentlichen Methoden.

  • Show : Blendet das gesamte vkeyboard ein oder aus. Es hat einen einzelnen optionalen Parameter, einen booleschen Wert, der angibt, ob ein- oder ausgeblendet werden soll.
      vkb.Show ( wahr );  // Zeigt das vkeyboard an
     
      vkb.Show ( falsch );  // Blendet das vkeyboard aus
     
      vkb.Show ();  // Zeigt das vkeyboard erneut an.
      Aktion ist standardmäßig.
     
  • ShowNumpad (nur vollständige und schlanke Varianten): Blendet das Nummernfeld ein oder aus. Es hat einen einzelnen optionalen Parameter, einen booleschen Wert, der angibt, ob ein- oder ausgeblendet werden soll.
      vkb.ShowNumpad ( wahr );  // Zeigt das Nummernfeld an
     
      vkb.ShowNumpad ( falsch );  // Blendet den Nummernblock aus
     
      vkb.ShowNumpad ();  // Zeigt das Nummernfeld erneut an.
      Diese Aktion ist standardmäßig aktiviert.
     
  • " set-param" >SetParameters : Ermöglicht die Anpassung von vkeyboard-Parametern zur Laufzeit. Die Funktion akzeptiert eine gerade Anzahl von Werten in Paaren: den Parameternamen und den Parameterwert von vkeyboard.
      // Einstellen eines einzelnen Parameters:
     
      vkb.SetParameters ( " font-color" , " # F0A050" );
     // Zwei Parameter gleichzeitig einstellen:
     
      vkb.SetParameters ( " font-name" , " Arial" , " Schriftfarbe" , " # F0A050" ); 

    Gültige Parameternamen sind:

    • callback - Rückruffunktionsreferenz. Gültiger Parameterwert: Verweis auf eine Funktion mit 1 oder 2 Formalparametern
    • font-name der Tastaturschriftart. Gültiger Parameterwert: Schriftname oder leere Zeichenfolge (= Standardschriftart)
    • font-size -font Größe in Pixel. Gültiger Wert: Schriftgröße in Pixel
    • font-color -font Farbe. Gültiger Parameterwert hier und weiter: String im Format #xxxxxx oder #xxx , wobei x eine gültige hexadezimale Ziffer ist
    • dead-color - Farbe der toten Tasten
    • base-color der Tastaturbasis
    • key-color - Farbe der Schlüssel
    • selection-color von: Ausgewähltes Element im Sprachmenü oder aktive Zusatztaste
    • border-color - Farbe des Tastenrands
    • Inaktiv inactive-border-color Umrandungsfarbe des deaktivierten Schlüssels
    • inactive inactive-key-color Hintergrundfarbe des deaktivierten Schlüssels
    • lang-cell-color border Farbe des Menüpunkts Sprache
    • click-font-color border Farbe des Menüpunkts Sprache
    • click-key-color Grenzfarbe des Sprachmenüpunktes
    • click-border-color Menüelements Sprache
    • show-click -show-Taste blinkt bei Klick. Gültiger Parameterwert: true oder false
    • layout - Index (0-basierte Ganzzahl) des Layouts, zu dem gewechselt werden soll. Verwenden Sie es, um Layouts programmgesteuert zu wechseln

Testsuite

Das Skript enthält folgende Beispiele:

  1. 1-edit-simple.html . Die grundlegendste Installation der JavaScript Virtual Keyboard.

  2. 2-edit-full.html . Fast genauso wie oben, aber die keyb_callback Funktion ist nicht so einfach wie früher. Während bei der einfachen Installation nur Zeichen am Ende des Textes in einem TEXTAREA angehängt oder TEXTAREA , können Sie in diesem Beispiel Text so bearbeiten, wie Sie es von jedem anderen TEXTAREA sind. Dieses Beispiel zeigt, wie die virtuelle Tastatur von JavaScript verwendet werden sollte. Alle anderen Proben sind von diesem abgeleitet.

  3. 3-edit-translator.html . Dieser ist nützlich, wenn Sie ihn auf Ihren Schlüsseln haben. Führen Sie diese Installation einfach aus, wechseln Sie vKeyboard zu Ihrem nativen Layout und tippen Sie mit einer echten Tastatur, nicht mit einer Maus. Das Skript ersetzt die eingegebenen Zeichen durch die im vkeyboard ausgewählten Zeichen.

  4. 4-test-change.html . Beispiel für die Verwendung der SetParameters API. Sehen Sie, wie vkeyboard seine Farbe ändert.

  5. 5-test-fly.html . Beispiel zeigt, wie mehrere INPUT-Felder mit einem einzelnen vkeyboard behandelt werden.

  6. 6-test-fliegen-anonym.html . Fast das gleiche wie oben, aber INPUT-Felder dürfen die id Eigenschaft weglassen. / Wo Seitenwechsel unerwünscht sind.

  7. 7-test-any-css.html . Beispiel zeigt, wie Sie die vKeyboard-Schriftgröße mit anderen Einheiten als Pixeln festlegen. Eine spezielle Funktion, convert_to_px , wird verwendet, um willkürliche Einheitenzeichenfolgen in pixelbasierte Werte umzuwandeln. Folgende Einheiten sind erlaubt: px , % , em , ex , pt , pc , cm , mm und in . Beachten Sie, dass die Funktion convert_to_px immer noch ziemlich experimentell ist. DPI-Einstellung, die zur Konvertierung von absoluten in relative Längeneinheiten verwendet wird. Mit jedem anderen Browser können nur px , % , em und ex sicher verwendet werden. Eine "normale" Einstellung von 96 Punkten pro Zoll - ganz normal für Windows-Maschinen - wird verwendet, wenn andere Längeneinheiten angegeben werden.

  8. 8-Testskala.html . Dieses Beispiel zeigt, wie Sie das Skalierungsproblem in Mozilla- und MS IE-Browser umgehen können. Das Problem mit MS IE besteht darin, dass nur die Größe, dh die Größe, für Elemente vergrößert wird, die nicht explizit den font-size . Der Mozilla-Browser hat ein ähnliches Problem: Er ändert nicht die Abmessungen des Containerelements des Textes. In diesem Beispiel verfolgt das Skript die Änderungen an der Basisschriftgröße und verwendet die API " SetParameters um das vkeyboard-Layout entsprechend zu skalieren. Dieses Beispiel sollte nur in Mozilla (Firefox) und MS IE betrachtet werden. Opera Browser implementiert einen Smart Zoom - dh es zoomt nur die ganze Seite - und leidet somit nicht unter dem Problem. MS Wrapper Browsers. Zum Beispiel implementiert MyIE2 (Maxthon) auch einen intelligenten Zoom. Es gibt auch Gerüchte, dass der Firefox 3-Browser ein Zoom-Verhalten nach Opera-ähnlicher Seite bietet.

Beachten Sie, dass sich alle oben genannten Beispiele im vkboard-Ordner des Quellarchivs befinden. Andere Varianten als die vollständige Tastatur werden nicht mit der vollständigen Testsuite bereitgestellt, sondern nur mit einem einzelnen Beispiel, das die einfachste Installation jeder Variante zeigt.

Erstellen Sie Ihr eigenes Sprachlayout

Zwei einfache Schritte:

  • avail_langs Array avail_langs mit einem zweigliedrigen Array des Sprachenkürzels - normalerweise einem ISO 639-1- Sprachencode - und dem Layoutnamen, der in dieser Sprache geschrieben ist, an. Verwenden Sie bei Bedarf Unicode-Hexadezimalwerte.
      avail_langs:
      [[ " Us" , " Englisch (US)" ],
      [ " Ca" , " Kanadisch" ],
      [ " Ru" , " & # x0420; & # x0443; & # x0441;"
      +
      " & # x0441; & # x043A; & # x0438; & # x0439;"
      ],
      [ " De" , " Deutsch" ],
      [ " Fr" , " Fran & # x00; E7; ais" ],
      [ " Es" , " Espa & # xxxF1; ol" ],
      [ " Es" , " Italienisch" ],
      [ " Cz" , " & # x010C; esky" ] ,
      [ " El" , " & # x0388; & # x03BB; & # x03BB;"
      + 
      " & # x03B7; & # x03BD; & # x03B1; & # x03C2;"
      ],
      [ " Er" , " & # x05E2; & # x05D1; & # x05E8; & # x05D9; & # x05EA;"
      ]]; 
  • Definieren Sie "normal" und optional die Editoren "Caps Lock", "Shift", "AltGr" und "AltGr + Shift". Es gelten die folgenden Regeln:
    • Der Name jedes Arrays muss mit der Abkürzung der Sprache und dem Unterstrich beginnen.
    • Namen von Arrays mit Werten, die Symbole für eine Tastatur mit "Feststelltaste" darstellen.
        // Tschechisches Layout:
       
        Cz_caps: [ " & # x003B;"
        , ..., " & # x002D;"
        ]; 
    • Namen von Arrays mit Werten für "Shift".
        Cz_shift: [ " & # x00BA;"
        , ..., " & # x005F;"
        ]; 
    • Namen von Arrays mit Werten, die Symbole für eine Tastatur mit "AltGr" darstellen.
        Cz_alt_gr: [..., " & # x0021;"
        , " & # x002F;"
        ]; 
    • Namen von Arrays mit Werten, die Symbole für eine Tastatur mit den gedrückten Tasten "AltGr" und "Shift" darstellen, müssen mit "alt_gr_shift" enden.
        Cz_alt_gr_shift: [ " & # x007E;"
        , ..., " & # x003F;"
        ]; 
    • Namen von Arrays mit Werten, die Symbole für den normalen Zustand einer Tastatur darstellen - ohne dass Modifizierertasten gedrückt werden - müssen mit "normal" enden.
        Cz_normal: [ " & # x003B;"
        , ..., " & # x002D;"
        ]; 
    • Jedes Array muss genau 48 Einträge enthalten, von denen jeder entweder den hexadezimalen Wert des entsprechenden Symbols enthält oder im Falle eines toten Schlüssels
      • Acute (?)
      • Breve (˘)
      • Caron ()
      • Cedilla (?)
      • Circumflex (^)
      • DialytikaTonos (, Dialytika Tonos, kombiniert akut + Umlaut)
      • DotAbove (˙, Punkt oben)
      • DoubleAcute (˝, doppelt akut)
      • Grave (`)
      • Ogonek ( Ogonek )
      • RingAbove (°, Ring oben)
      • Tilde (~)
      • Umlaut (?)

      Das Macron (ˉ) diakritische Array ist auch über die Datei macron.txt im Ordner 1-Ordner des Archivs verfügbar. Es ist nicht im Hauptskript enthalten.

        Cz_alt_gr: [ [ " & # x0060;"
        , " Grab" ] , // toter Schlüssel
       
        " & # x0021;"
        , ... // einfacher Schlüssel
       
    • Arrays werden dem Layout gemäß der folgenden Abbildung zugeordnet, wobei sich die Zahlen in den Array-Indizes befinden.

      Array-zu-Key-Zuordnung

    • Das "normale" Array ist obligatorisch; andere sind optional.

    Die folgenden Layouts sind in die vollständigen und schlanken Tastaturvarianten integriert. Die Nummer / der Index neben dem Layoutnamen ist der Layout-Index in der IBM Globalization-Datenbank:

    • Englisch (US International) - 103P
    • Kanadisch (mehrsprachiger Standard) - aus dem Wikipedia-Artikel über Tastaturlayouts
    • Deutsch - 129
    • Französisch - 189
    • Spanisch - 173
    • Italienisch - 142
    • Russisch - 443
    • Tschechisch - 243
    • Griechisch - 319
    • Hebräisch - 212

    24 weitere Layouts sind in einem separaten Layoutpaket verfügbar, das sich im Ordner 5-layout_pack im Archiv befindet . Es beinhaltet:

    • Europäisch:
    • Asiatisch:
      • Arabisch - 470

    Informationen zu diesen Layouts finden Sie in der Datei readme.txt im Ordner 5-layout_pack im Archiv.

Erstellen Sie Ihr eigenes Tastaturlayout

Möglicherweise möchten Sie ein benutzerdefiniertes Tastenlayout erstellen. Es gibt zwei Möglichkeiten, dies zu erreichen:

  1. Verwenden Sie atm.js als Vorlage; es ist das einfachste Skript von vier. Weitere Informationen finden Sie im Ordner numpad_atm im Archiv . Kurz gesagt, der Ablauf des Skripts ist wie folgt:

    • Erstellen Sie die äußere Box.

        var initX = 0 , initY = 0 ;
       ...
       var kb = document.createElement ( " DIV" );
       ct.appendChild (kb);
       ct.style.display = " Blockieren" ;
       ct.style.position = " absolut" ;
       ct.style.top = initY + " px" , ct.style.left = initX + " px" ;
       kb.style.position = " relativ" ;
       kb.style.top = " 0px" , kb.style.left = " 0px" ;
       kb.style.border = " 1px fest" + bc;
       var kb_main = document.createElement ( " DIV" );
       kb.appendChild (kb_main);
       kb_main.style.position = " relativ" ;
       kb_main.style.width = " 1px" ;
       kb_main.style.cursor = " Standard" ;
       kb_main.style.backgroundColor = bkc;
      
       ... 
    • Erstellen Sie die Schlüssel mit der Methode _setup_key .

        var kb_pad_7 = diese ._setup_key (kb_main, " 1px" , 
        " 1px" , cp, cp, bc, c, lh, fs);
       kb_pad_7inner_HTML = " 7" ;
       kb_pad_7.id = container_id + " ___pad_7" ; 
    • _generic_callback_proc alle Ausgaben an die _generic_callback_proc Methode weiter. Für das VATMpad Objekt wird dies beim Aktualisieren des Layouts in der _set_key_state Methode durchgeführt.

        dies ._setup_event (schlüssel_sub, ' mousedown' , 
        this ._generic_callback_proc);
      
    • Rufen Sie die Rückruffunktion auf. Dies passiert, wenn der Benutzer eine "Taste" drückt.

        _generic_callback_proc: Funktion (Ereignis)
       {
        ...
        if (val && vkboard.Callback)
        vkboard.Callback (Wert);
       } 

      Beispiellayout

Ruf von jenseits

Ein natürliches Merkmal, das alle Benutzer von einem Textfeld erwarten, ist die Fähigkeit, den Text an jeder Position innerhalb eines Feldes zu bearbeiten. Dies ist jedoch mit der Funktion nicht möglich. Das folgende Skript versucht, einen kompatiblen Rückruf zu schreiben. Es basiert auf der Diskussion im thescripts.com-Forum.

  <Kopf>
  <SCRIPT type = " text / javascript" > <! -
  var open = false ,
  InsertionS = -1, // Auswahl starten
 
  EinfügungE = 0 ;  // Ende Ende
 
  var userstr = navigator.userAgent.toLowerCase ();
  var safari = (userstr.indexOf ( ' applewebkit' )! = -1);
  var gecko = (userstr.indexOf ( ' gecko' )! = -1) &&! safari;
  var standr = Gecko ||  window.opera ||  Safari;
  ...
  // Erweiterte Rückruffunktion:
 
  //
   Funktion keyb_callback (ch)
  {
  var val = Text.Wert;
  wechseln (ch)
  {
  Fall " BackSpace" :
  if (val.length)
  {
  var span = null ;
  if (document.selection)
  span = document.selection.createRange (). duplicate ();
  if (span && span.text.length> 0 )
  {
  span.text = " " ;
  getCaretPositions (Text);
  }
  sonst deleteAtCaret (Text);
  }
  Pause ;
  Fall " <" :
  if (EinfügungS> 0 )
  setRange (Text, EinfügungS - 1 , EinfügungE - 1 );
  Pause ;
  Fall " >" :
  if (EinfügungE <val.length)
  setRange (Text, EinfügungS + 1 , EinfügungE + 1 );
  Pause ;
  Fall " / \\":
 
   wenn (! standr) breche;
 
   var prev = val.lastIndexOf (" \ n " , EinfügungS) + 1;
 
   var pprev = val.lastIndexOf (" \ n " , prev - 2);
 
   var next = val.indexOf (" \ n " , EinfügungS);
 
   if (next == -1) next = val.length;
 
   var nnext = next - InsertionS;
 
   if (vorherige> nächste)
 
   {
 
   prev = val.lastIndexOf (" \ n " , EinfügungS - 1) + 1;
 
   pprev = val.lastIndexOf (" \ n " , prev - 2);
 
   }
 
   // Anzahl der Zeichen in der aktuellen Zeile auf der linken Seite des Caret:
 
   var links = InsertionS - prev;
 
   // Länge der vorh.
  Linie:
 
   var plen = prev - pprev - 1;
 
   // Anzahl der Zeichen in der vorherigen
  Linie zu
  
   // das Recht des Caret:
 
   var rechts = (plen <= links)?
  1: (Plenar - links);
 
   var change = links + rechts;
 
   setRange (text, InsertionS - change, insertE - change);
 
   Pause;
 
   Fall " \\ / " :
 
   wenn (! standr) breche;
 
   var prev = val.lastIndexOf (" \ n " , EinfügungS) + 1;
 
   var next = val.indexOf (" \ n " , EinfügungS);
 
   var pnext = val.indexOf (" \ n " , nächstes + 1);
 
   if (next == -1) next = val.length;
 
   if (pnext == -1) pnext = val.length;
 
   if (pnext <next) pnext = next;
 
   if (vorherige> nächste)
 
   prev = val.lastIndexOf (" \ n " , EinfügungS - 1) + 1;
 
   // Anzahl der Zeichen in der aktuellen Zeile auf der linken Seite des Caret:
 
   var links = InsertionS - prev;
 
   // Länge der nächsten Zeile:
 
   var nlen = pnext - nächstes;
 
   // Anzahl der Zeichen in der nächsten Zeile auf der linken Seite des Caret:
 
   var rechts = (nlen <= links)?
  0: (nlen - links - 1);
 
   var change = (nächste - EinfügungS) + nlen - rechts;
 
   setRange (Text, Einfügen + Ändern, Einfügen + Ändern);
 
   Pause;
 
   Standard:
 
   insertAtCaret (Text,
  
   (ch == " Enter " ? (window.opera? '\ r \ n': '\ n'): ch));
 
   }
 
   }
 
   }
 
 
   // Diese Funktion ruft die Position ab (in Zeichen relativ zu
 
   // Der Anfang des Textes des Bearbeitungscursors (Caret), oder, falls
 
   // text ist im TEXTAREA die Start- und Endposition ausgewählt
 
   // der Auswahl.
 
   //
 
   Funktion getCaretPositions (Strg)
 
   {
 
   var CaretPosS = -1, CaretPosE = 0;
 
   // Mozilla Weg:
 
   if (ctrl.selectionStart || (ctrl.selectionStart == '0'))
 
   {
 
   CaretPosS = ctrl.selectionStart;
 
   CaretPosE = ctrl.selectionEnd;
 
   EinfügungS = CaretPosS == -1?
  KaretPosE: KaretPosS;
 
   EinfügungE = CaretPosE;
 
   }
 
   // IE Weg:
 
   sonst if (document.selection && ctrl.createTextRange)
 
   {
 
   var start = Ende = 0;
 
   versuche es
 
   {
 
   Start =
  
   Math.abs (
 
   document.selection.createRange (). moveStart (" Zeichen " ,
  
   -10000000));
  // Beginnen
 
   if (Anfang> 0)
 
   {
 
   versuche es
 
   {
 
   var endReal =
  
   Math.abs (
 
   ctrl.createTextRange (). moveEnd (" Zeichen " ,
  
   -10000000));
 
   var r = document.body.createTextRange ();
 
   r.moveToElementText (Strg);
 
   var sTest =
  
   Math.abs (r.moveStart (" Zeichen " , -10000000));
 
   var eTest =
  
   Math.abs (r.moveEnd (" Zeichen " , -10000000));
 
   if ((ctrl.tagName.toLowerCase ()! = 'Eingabe') &&
  
   (eTest-endReal == sTest))
 
   start - = sTest;
 
   }
 
   fangen (err) {}
 
   }
 
   }
 
   Fang (e) {}
 
   versuche es
 
   {
 
   Ende =
  
   Math.abs (
 
   document.selection.createRange (). moveEnd (" Zeichen " ,
  
   -10000000));
  // enden
 
   if (Ende> 0)
 
   {
 
   versuche es
 
   {
 
   var endReal =
  
   Math.abs (
 
   ctrl.createTextRange (). moveEnd (" Zeichen " ,
  
   -10000000));
 
   var r = document.body.createTextRange ();
 
   r.moveToElementText (Strg);
 
   var sTest =
  
   Math.abs (r.moveStart (" Zeichen " , -10000000));
 
   var eTest =
  
   Math.abs (r.moveEnd (" Zeichen " , -10000000));
 
   if ((ctrl.tagName.toLowerCase ()! = 'Eingabe') &&
  
   (eTest-endReal == sTest))
 
   Ende - = sTest;
 
   }
 
   fangen (err) {}
 
   }
 
   }
 
   Fang (e) {}
 
   EinfügungS = Start;
 
   EinfügungE = Ende
 
   }
 
   }
 
   Funktion setRange (Strg, Start, Ende)
 
   {
 
   if (ctrl.setSelectionRange) // Standardweise (Mozilla, Opera, ...)
 
   {
 
   ctrl.setSelectionRange (Start, Ende);
 
   }
 
   sonst // MS IE
 
   {
 
   var Bereich;
 
   versuche es
 
   {
 
   Bereich = ctrl.createTextRange ();
 
   }
 
   fangen (e)
 
   {
 
   versuche es
 
   {
 
   Bereich = document.body.createTextRange ();
 
   range.moveToElementText (Strg);
 
   }
 
   fangen (e)
 
   {
 
   Bereich = null;
 
   }
 
   }
 
   wenn (! Bereich) zurückkehrt;
 
   range.collapse (wahr);
 
   range.moveStart (" Zeichen " , Start);
 
   range.moveEnd (" Zeichen " , Ende - Anfang);
 
   range.select ();
 
   }
 
   EinfügungS = Start;
 
   EinfügungE = Ende;
 
   }
 
   Funktion deleteSelection (Strg)
 
   {
 
   if (EinfügungS == EinfügungE) zurückgeben;
 
   var tmp =
  
   (document.selection &&
  
   ! window.opera)?
  ctrl.value.replace (/ \ r / g, " " ): ctrl.value;
 
   ctrl.value =
  
   tmpstring (0, InsertionS) + tmpstring (InsertionE,
  
   tmp.length);
 
   setRange (Strg, EinfügungS, EinfügungS);
 
   }
 
   Funktion deleteAtCaret (Strg)
 
   {
 
   if (EinfügungS! = EinfügungE)
 
   {
 
   deleteSelection (Strg);
 
   Rückkehr;
 
   }
 
   if (EinfügungS == EinfügungE)
 
   InsertionS = InsertionS - 1;
 
   var tmp =
  
   (document.selection &&
  
   ! window.opera)?
  ctrl.value.replace (/ \ r / g, " " ): ctrl.value;
 
   ctrl.value =
  
   tmpstring (0,
  
   EinfügungS) + tmp_string (EinfügungE, tmp.length);
 
   setRange (Strg, EinfügungS, EinfügungS);
 
   }
 
   // Diese Funktion fügt Text an der Caret-Position ein:
 
   //
 
   Funktion insertAtCaret (Strg, val)
 
   {
 
   if (EinfügungS! = EinfügungE) deleteSelection (ctrl);
 
   if (isgecko && document.createEvent &&! window.opera)
 
   {
 
   var e = document.createEvent (" Tastaturereignis " );
 
   if (e.initKeyEvent && ctrl.dispatchEvent)
 
   {
 
   e.initKeyEvent (" keypress " , // in DOMString typeArg,
 
   false, // in boolean canBubbleArg,
 
   true, // in boolean cancelableArg,
 
   null, // in nsIDOMAbstractView viewArg,
 
   falsch, // in boolean ctrlKeyArg,
 
   falsch, // in boolean altKeyArg,
 
   false, // in boolescher shiftKeyArg,
 
   false, // im booleschen metaKeyArg,
 
   Null, // Schlüsselcode;
 
   val.charCodeAt (0));
  // Zeichencode
 
   ctrl.dispatchEvent (e);
 
   }
 
   }
 
   sonst
 
   {
 
   var tmp =
  
   (document.selection &&
  
   ! window.opera)?
  ctrl.value.replace (/ \ r / g, " " ): ctrl.value;
 
   ctrl.value =
  
   tmpstring (0,
  
   InsertionS) + Val + TmpString (InsertionS,
 
   tmp.length);
 
   }
 
   setRange (Strg, EinfügungS + Wert.Länge, EinfügungS + Wert.Länge);
 
   }
 
   // -> </ SCRIPT>
 
  </ Kopf>
 
  <KÖRPER>
 
   ...
 
   <- Vergessen Sie nicht 'onclick' und 'onkeyup': ->
 
   <TEXTAREA onkeyup = " getCaretPositions ( this ); " onclick = " getCaretPositions ( this ); " id = " Textfeld " rows = " 12 " cols = " 50 " >
 
   </ TEXTAREA>
 
   ...
 
  </ BODY>
 

Beachten Sie, dass die Auf- und Abwärtspfeile auf standardkonformen Browsern angezeigt werden! Berücksichtigen Sie dies bei der Erstellung von Touchscreen-Anwendungen. Sie können das obige Skript testen, indem Sie die Datei 2-edit-full.html im Ordner vkboard des angehängten angehängten Archivs ausführen. Der grundlegende Rückruf wird in 1-edit-simple.html angezeigt .

Tipps und Tricks

Der Script-Flow ist ziemlich einfach, daher hoffe ich, dass es nicht schwierig sein wird, darauf einzugehen. Hier ein paar Worte zu ein paar kniffligen Stellen.

  • Veranstaltung einrichten . Wir müssen sowohl MS IE als auch W3C DOM Event-Modelle behandeln.

      _setup_event: Funktion (elem, eventType, Handler)
     {
      zurück (elem.attachEvent? // MS IE Weg
     
      elem.attachEvent ( " on" + eventType, Handler):
      ((elem.addEventListener)? // W3C Weg
     
      elem.addEventListener (eventType, handler, false ): null ));
     } 
  • Schlüssel-Container-Setup. Jeder Schlüssel besteht aus dem "äußeren" DIV , wobei wir nur die Parameter "oben", "links", "Breite" und "Höhe" festlegen - und das "innere" DIV , das Padding, Rahmenfarbe und andere Parameter akzeptiert. Wir benutzen solch eine komplexe Konstruktion. Beachten Sie, dass es die JavaScript-Lösung gibt. Trenton Moss (siehe Punkt 6) Wenn Sie das Boxmodell meiden möchten, verwenden Sie Trenton Moss (siehe Punkt 6).

      _setup_key: function (parent, id, oben, links, width, height,
      text_align, line_height, font_größe,
      font_weight, padding_left, padding_right)
     {
      var existiert = document.getElementById (id);
      // Äußere DIV:
     
      var Schlüssel = 
      existiert?  exists.parentNode: document.createElement ( " DIV" );
      this._setup_style (Schlüssel, 
      ! existiert, oben, links, Breite, Höhe, " absolut" );
      // Innerer Div:
     
      var key_sub = existiert?  existiert: document.createElement ( " DIV" );
      key.appendChild (key_sub);  parent.appendChild (Schlüssel);
      this._setup_style (Schlüssel_Sub, 
      ! existiert, " " , " " , " " , line_height, " relativ" ,
      text_align, line_height, font_size, font_weight,
      padding_left, padding_right);
      key_sub.id = ID;
      Zurückgeben key_sub;
     } 
  • Deaktivieren der Inhaltsauswahl Dieser ist sehr wichtig wegen der sehr hohen Tippgeschwindigkeit, die manche Leute erreichen können, und als Folge davon die unvermeidliche vkeyboard Inhaltsauswahl. Es kann anstelle der UNSELECTABLE (MS IE) und -moz-user-select (Gecko-basierte Browser) verwendet werden.

      dies ._setup_event (kb_main, " selectstart" ,
      Funktion (Ereignis) 
      { 
      Rückgabe falsch ; 
      });
     dies ._setup_event (kb_main, " mousedown" ,
      Funktion (Ereignis) 
      { 
      if (event.preventDefault)
      event.preventDefault (); 
      Rückgabe falsch ; 
      });
    

Code

Virtual Keyboard-Funktionen auf einen Blick

  • Ein komplettes JavaScript-Toolkit, das für die Simulation jedes einzelnen Aspekts eines echten Tastaturgeräts geeignet ist
  • Kompakte (42.8 Kb - komprimierte vollständige Variante) Skript, das keine Bilder benötigt, für einen schnelleren Download
  • Funktioniert und sieht auf allen gängigen Browsern gleich aus, getestet mit Mozilla Firefox 1.5 / 2, Opera 7.5 / 9.22, Safari 3, MS IE 6/7
  • Sehr einfaches Setup-Verfahren
  • In sich abgeschlossen, ohne externe Abhängigkeiten
  • Anpassbare Schriftart, Schriftgröße und Farben; Perfekt für hautfreundliche Umgebungen
  • Verschiedene Varianten sind verfügbar, einschließlich voller Tastatur, schlanker Volltastatur, Nummernblock und Numpad im ATM-Stil
  • Komprimierte Skripte sind gebündelt, dh vollständiges Skript: 42,8 Kb, schlank: 43 Kb, Nummernblock: 9,30 Kb, atm-Nummernblock: 8,62 Kb
  • Zehn häufig verwendete Tastaturlayouts werden mit den vollständigen und schlanken Skripten gebündelt, 24 weitere Layouts befinden sich im mitgelieferten Layout-Paket
  • Flexible Installationsoptionen, dh beliebig viele VCeyboards pro Seite, einstellbare Callbacks
  • Open-Source-Skript, das unter der zlib / libpng-Lizenz vertrieben wird, was bedeutet, dass es auch auf Websites kostenlos genutzt werden kann

Skriptanforderungen

Jeder Browser, der Folgendes kennt:

  • JavaScript (Implementierung gemäß ECMAScript Edition 3)
  • W3C DOM Stufe 1
  • CSS Level 1 (zumindest die meisten Elemente)
  • W3C oder MS IE Ereignismodell