JavaScript Virtual Keyboard

Virtuelle Tastatur an einen TEXTAREA- Feld gebunden

Einführung

Stellen Sie sich vor, dass Sie in einem Londoner Internet-Café sitzen wollen, eine E-Mail an Ihre Familie in Athen leben zu schreiben. Es ist gut, wenn jemand in Ihrer Familie Englisch spricht. Wenn nicht, wo würden Sie eine Tastatur mit einem griechischen Layout finden? Ich bin sicher, Sie können ein Dutzend Situationen erinnern, wenn Sie dachte: "Ich wünschte, ich eine andere Tastatur hatte." Dieser Artikel stellt die virtuelle Tastatur, die diese Usability-Problem löst. Die Entwurfsaufgabe für sie kann wie folgt angegeben werden:

  • Lassen Sie die Texteingabe von Computern ohne die Benutzermuttersprache Layout installiert ist, ermöglicht so die Erstellung von nationalen und mehrsprachige Schnittstellen - zB Web-basierte E-Mail -, die weltweit eingesetzt werden kann.
  • Lassen Sie die Texteingabe von Computern ohne Tastatur oder mit Sensorbildschirmen - Handheld-PCs, Smartphones usw. - Oder mit Fernbedienungen wie Mäuse, E-Stifte etc. da sie die einzigen Eingabegeräte.
  • Schutz der Benutzer vor Keylogger-Typ Spyware.

Die Installation der virtuellen Tastatur erfordert eine lässige Kenntnisse von HTML und JavaScript. Um in der Lage sein, das Skript für die Feinabstimmung, müssen Sie mit W3C DOM Level 1, CSS Level 1 und dem DOM / Microsoft Internet Explorer Ereignismodell vertraut sein. Virtual Keyboard ist ein Open-Source-Skript unter der zlib / libpng-Lizenz vertrieben.

Einrichtung

Sechs einfache Schritte:

  1. Der Download - -source das Archiv .

  2. Wählen Sie Ihre Installation:

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

      Screenshot - JVK-full.jpg

    • vkboards.js (2-vkboard_slim Ordner) ist fast die gleiche wie zuvor, aber das Sprachmenü, das durch Klicken auf das rote Rechteck in der linken unteren Ecke der Tastatur zugegriffen werden kann, hat eine spezielle Konfiguration. Die Zellen sind in Reihen angeordnet sind, nicht als einfaches Dropdown-Menü, wie in der vorhergehenden Variante.

      Screenshot - JVK-slim.jpg

      • Diese Installation wird empfohlen, wenn Sie kurz auf Raum (UMPC, Touchscreen-Kiosk, etc.) sind oder wenn Sie 4 oder mehr Layouts installiert

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

      Numpad Variante

    • vatmpad.js (4-numpad_atm Ordner) ist ein gestrippt Numpad , die nur die Tasten eingeben und Nummer enthält.

      numpad_atm Variante

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


  ...

    Beachten Sie, dass für jede Art von Installation sind zwei Skriptdateien zur Verfügung:

    • vkboard.js / vkboards.js / vnumpad.js / vatmpad.js sind das Original - Skript. Wenn Sie möchten, um das Skript zu ändern oder wollen einfach nur lernen, wie es funktioniert, das ist die Datei für Sie, zu betrachten.
    • vkboardc.js / vkboardsc.js / vnumpadc.js / vatmpadc.js ist eine komprimierte Version des Skripts bzw. 30,5% / 30,5% / 39,8% / 39,5% kleiner als das Original. Dies ist die Datei, die Sie im Web verwendet werden soll.

  4. Definieren Sie eine Callback-Funktion: 

      <HTML> <HEAD> <SCRIPT type = "text / javascript" src = "vkboard.js"> </ SCRIPT> <SCRIPT> // Minimal Callback - Funktion:
  Funktion keyb_callback (char) {

  // Let 's binden vkeyboard an die <TEXTAREA-> 
  // Mit id = "Textfeld":
  var text = 
  document.getElementById ( "Textfeld"), val = text.value;
  Schalter (ch)
  {
  Fall "Backspace":

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

  text.value + = "\ n";
  brechen;
  Standard:
  text.value + = ch;
  }
  }
  </ SCRIPT> </ HEAD>

  ...

    Die Callback-Funktion muss einen oder zwei Parameter. Der erste Parameter ist obligatorisch und übernimmt einen String-Wert durch das vkeyboard Skript zurückgegeben. : Der zweite Parameter ist der optionalen und akzeptiert die id des Behälters des vkeyboard Das ist der der Rückruf aufgerufen. Es kann sinnvoll sein, wenn Sie eine einzelne Rückruffunktion, um mehrere vkeyboards binden. Beachten Sie, dass dies die grundlegendste Callback-Funktion ist. Beispiel für eine von Ein fortschrittliches mehr unter Code - Schnipsel gegeben wird später .

  5. Ein Container für die die Tastatur definieren, die die der eine sein , muss leer DIV oder SPAN . 
      <HTML> ...

  <BODY> ...

  <TEXTAREA- id = "Textfeld" Zeilen = " 10" cols = "50"> </ TEXTAREA-> <div id = "Tastatur"> </ div> </ BODY> </ HTML>
  6. Schließlich zeigen die Tastatur. 
      <BODY onload = "new VKeyboard ( " Tastatur ", keyb_callback);"> <- VKeyboard auf Last gezeigt, gebunden an Behälter mit! 
   id = "Tastatur" und mit Callback - Funktion "keyb_callback" ->

    Natürlich ist die der Bedingungen , Schaffung von VKeyboard - das Numpad: VNumpad , die ATM-Stil der Numpad: VATMpad - die verwendet werden können , Anywhere ist eine der JavaScript - Code unten das sein kann.

API

Des VKeyboard hat der Konstrukteur einen die Vielzahl der Parameter Die zu helfen Ihnen seine Kontrolle "Look and Feel. Hier ist die vollständige Liste, zusammen mit dem Parameter Standardwerte. 

  var vkb =
 
  neue VKeyboard ( "Tastatur", // Containers id, obligatorisch 
  keyb_callback, // Verweis auf Callback - Funktion, obligatorisch 
  // (Diese & folgenden Parameter sind optional ) 
  true // erstellen Sie die Pfeiltasten oder nicht? 
  wahr, // nach oben und unten Pfeil erstellen Schlüssel?  
  false // reserviert
  
  wahr, // die Numpad erstellen oder nicht ? 
  "", // Font - Namen ( " " == System default) 
  "14px", // Schriftgröße in Pixel 
  "# 000", // font color
 
  "# F00", // Schriftfarbe für die Tottasten 
  "#FFF", // Tastatur Basis Hintergrund Farbe 
  "#FFF", // Keys 'Hintergrund Farbe 
  "#DDD", // Hintergrundfarbe eingeschaltet / ausgewählte Element 
  "# 777", // Rahmenfarbe
 
  "#ccc", // Border / font Farbe "inaktiv" Taste 
  // (Key ohne Wert / deaktiviert ) 
  "#FFF", // Hintergrundfarbe von "inaktiv" Taste 
  // (Key ohne Wert / deaktiviert ) 
  "# F77", // Grenzfarbe der Sprache Zelle Selektor 
  true // zeigen Taste Blitz auf Klick ?  (False per Default)
 
  "# CC3300", // font color während Flash 
  "# FF9966", // Taste Hintergrund Farbe während Flash 
  "# CC3300", // Schlüssel Grenze Farbe während Flash 
  false // VKeyboard in die Seite einbetten ? 
  true // Verwendung 1-Pixel - Lücke zwischen den Tasten?
 
  0);
  // Index (0-basiert) der ursprünglichen Layout

Bitte seien Sie vorsichtig beim vkeyboard von früheren Versionen aktualisieren. Überprüfen Sie immer die Nummer / Fluss der Parameter. VNumpad und VATMpad haben eine den Satz von Parametern Die Limited: 

  var vkb =
 
  neue VNumpad ( "Numpad", // Containers id, obligatorisch 
  pad_callback, // Verweis auf die Callback - Funktion , obligatorisch 
  "", // Font - Namen ( " " == System default) 
  // (Diese und folgende Parameter sind optional ) 
  "14px", // Schriftgröße in Pixel 
  "# 000", // font color
 
  "#FFF", // Tastatur Basis Hintergrund Farbe 
  "#FFF", // Keys 'Hintergrund Farbe 
  "# 777", // Rahmenfarbe
 
  true // zeigen Taste Blitz auf Klick ?  (False standardmäßig *)
 
  "# CC3300", // Schriftfarbe für Flash - Ereignis 
  "# FF9966", // Schlüssel Hintergrund Farbe für Flash - Ereignis 
  "# CC3300", // Schlüssel Grenze Farbe für Flash - Ereignis 
  false // VNumpad in die Seite einbetten ? 
  true);
  // Verwendung 1-Pixel - Lücke zwischen den Tasten?

Das Obwohl die Note "von Flash - switch - Anweisung" von der Standard ausgeschaltet ist, es ist in allen angegebenen Einschalten den Proben . VKeyboard hat die der Öffentlichkeit die folgenden Methoden.

  • Show : Zeigt oder versteckt das Ganze vkeyboard. Es verfügt über einen einzigen optionalen Parameter, einen booleschen Wert, ob Staaten ein- oder ausblenden. 
      vkb.Show (true);  // Zeigt die vkeyboard
 
  vkb.Show (false);  // Blendet die vkeyboard
 
  vkb.Show ();  // Zeigt die vkeyboard wieder.
  Aktion ist standardmäßig aktiviert .
  • ShowNumpad (und voller schlanke Varianten nur): Zeigt oder versteckt die die Numpad. Es verfügt über einen einzigen optionalen Parameter, einen booleschen Wert, ob ein- oder ausblenden diktiert. 
      vkb.ShowNumpad (true);  // Zeigt die Numpad
 
  vkb.ShowNumpad (false);  // Blendet die Numpad
 
  vkb.ShowNumpad ();  // Zeigt die Numpad wieder.
  Diese Aktion ist standardmäßig aktiviert .
  • " set-param" >SetParameters : Hier können Sie von Anpassung von Parametern Die an der Laufzeit zu vkeyboard. Die Funktion übernimmt eine gerade Anzahl von Werten in Paaren: die vkeyboard Parametername und Parameterwert. 
      // Einstellen der einzelnen Parameter:
 
  vkb.SetParameters ( "font-color", "# F0A050");
 // Einstellen zwei Parameter auf einmal:
 
  vkb.SetParameters ( "font-name", "Arial", "font-Farbe", "# F0A050");

    Gültige Parameternamen sind:

    • callback - die Callback - Funktion die Referenz. Gültige Parameterwert: Hinweis auf eine Funktion mit 1 oder 2 formalen Parameter
    • font-name - Name der Schriftart Tastatur. Gültige Parameterwert: Schriftname oder eine leere Zeichenfolge (= Standard-Schriftart)
    • font-size - Schriftgröße Bett in Pixeln. Gültige Parameterwert: Schriftgröße in Pixel
    • font-color - Schriftfarbe. Parameter der Wert hier gültig und weiter :: string im Format gefunden #xxxxxx oder #xxx , wo Klausel x ist jede der gültige Hexadezimalzahl Die
    • dead-color - die Farbe der Tottasten
    • base-color - Farbe der Tastatur Basis
    • key-color - Farbe der Tasten
    • selection-color - Farbe: ausgewählte Element in der Sprache oder Menü ist der Benutzer aktiv eine Zusatztaste
    • border-color - Farbe der Schlüssel Grenze
    • inactive-border-color - Grenze Farbe der Behinderten ist der Schlüssel
    • inactive-key-color - Farbe des Hintergrundes verwendet , um den behinderten Schlüssel
    • lang-cell-color - Rahmenfarbe des Sprachmenü ist der Benutzer Artikel
    • click-font-color - Rahmenfarbe des Sprachmenü ist der Benutzer Artikel
    • click-key-color - Rahmenfarbe des Sprachmenü ist der Anwender Artikel
    • click-border-color - Rahmenfarbe des Sprachmenü ist der Benutzer Artikel
    • show-click - show Schlüssel von Flash auf dem Klick. Parameter der Wert gültig: true oder false
    • layout - Index (0-basierte integer) des Layouts zu wechseln. Verwenden Sie es programmatisch Layouts umschalten

Testsuite

Das Skript wird mit den folgenden Beispielen:

  1. 1-edit-simple.html. Die Basisinstallation des JavaScript Virtual Keyboard.

  2. 2-edit-full.html. Das gleiche wie mit der von fast oben, aber die keyb_callback Funktion ist nicht einfach , wie mit so war es. Einfache Installation nur Während anhängt oder löscht die Zeichen aus dem Ende des Textes in einem TEXTAREA , die diese Probe Hier können Sie den Text bearbeiten in der Art und Weise Sie mit dem zu jedem anderen Textprozessor gewohnt sind. Dieses Beispiel zeigt, wie die JavaScript virtuelle Tastatur sollte in der Regel verwendet werden. Alle anderen Proben werden aus diesem abgeleitet.

  3. 3-edit-translator.html. Dieses ist nützlich, wenn Sie die Tastatur zu tun haben, aber es hat nicht Ihre Mutter Layout auf seine Schlüssel. Einfach diese Installation ausführen, wechseln vkeyboard in Ihr Heimat Layout und Typ mit einer echten Tastatur, keine Maus. Das Skript wird die eingegebenen Zeichen mit denen ersetzen in vkeyboard gewählt.

  4. 4-Test-change.html. Zeigt die Verwendung der Probe des SetParameters die API. Beobachten Sie, wie vkeyboard seine Farbe ändert.

  5. 5-Test-fly.html. Beispiel zeigt, wie mehrere Eingabefelder mit einem einzigen vkeyboard zu handhaben.

  6. 6-Test-fly-anonym.html. Das gleiche wie mit der von fast oben, aber die Eingabefelder sind mit dem Auslassen der erlaubte id - Eigenschaft. Kann sehr nützlich sein für die Einführung von vkeyboard in bestehende Websites / Seiten, auf denen Seite Änderungen unerwünscht sind.

  7. 7-Test-any-css.html. Beispiel zeigt, wie die vkeyboard Schriftgröße einzustellen mit anderen Einheiten als Pixel. Sonderfunktion A, convert_to_px , wird verwendet , um den convert Einheit beliebige Strings pixelbasierte Werte. Die folgenden sind Einheiten der erlaubt: px , % , em , ex , pt , pc , cm , mm und in . Der Hinweis Dass die convert_to_px Funktion noch recht experimentell. Hauptproblem ist die von , dass nur der die MS die IE - Browser bietet eine Möglichkeit - über die window.screen.logicalXDPI Eigenschaft - zum den aktuellen Bildschirm DPI - Einstellung abrufen, die die von relativ zum absoluten zu den Längeneinheiten zum convert verwendet wird. Die jeder anderen Browser Mit nur px , % , em und ex das CAN sicher verwendet werden ausgeführt. Eine "normale" Einstellung von 96 Punkten pro Zoll - ganz für Windows-Maschinen üblich - wird verwendet, wenn andere Längeneinheiten angegeben sind.

  8. 8 Test scale.html- . Dieses Beispiel zeigt, wie die Schriftskalierung Problem in Mozilla und MS IE-Browsern zu umgehen. Problem mit der MS des IE , dass es nur zoomt, dh die Änderungen Schriftgröße Bett, auf die Elemente, die nicht die haben font-size die eingestellte Explizit Stil. Der Mozilla - Browser hat der Auswahl Ähnliche ein Problem: Es spielt die Änderung der font-size , aber nicht die Änderung der Abmessungen des Behälterelements Text. Die in diesem Beispiel mit in, Skript erfasst die Änderungen an der Basis font-size und die uses - Klausel SetParameters das API entsprechend dem vkeyboard um das Layout zu skalieren. Diese Probe sollte nur in Mozilla (Firefox) und MS IE betrachtet werden. Opera-Browser implementiert eine Smart-Zoom - also nur die gesamte Seite zoomt - und somit nicht von dem Problem leidet. Sie können auch dieses Problem mit einer der MS IE-Wrapper-Browser überwinden. Zum Beispiel MyIE2 (Maxthon) implementiert auch eine Smart-Zoom. Es gibt auch Gerüchte, dass die Firefox 3 Browser eine Opera-ähnliche Seite Zoomverhalten verfügen wird.

Dass alle der Note die die über dem gefundenen Proben! Können die in den Ordner der vkboard-Quelle das Archiv . Varianten, von der vollen Tastatur nicht mit dem vollständigen Test-Suite, nur mit einer einzigen Probe zur Verfügung gestellt, die die einfachste Installation jeder Variante zeigt.

Erstellen Ihrer eigenen Sprache Layout

Zwei einfache Schritte:

  • Die das Anfügen avail_langs von Array mit einem Mitglied des Arrays zu zwei zwei Bestehend aus dem Sprachkürzel - Wird normalerweise eine der ISO 639-1 Sprache unter Code - Layout und der Name in dieser Sprache geschrieben, die Unicode Hex - Werte die mit where - Klausel erforderlich. 
      avail_langs:
  [[ "Us", "Englisch (US)"],
  [ "Ca", "Canadian" ],
  [ "Ru", "& # x0420; & # x0443; & # x0441;"  +
  "& # X0441; & # x043A ; & # x0438; & # x0439;"  ]
  [ "De", "Deutsch" ],
  [ "Fr", "Fran & # x00E7; ais"],
  [ "Es", "Espa & # x00F1; ol"],
  [ "Es", "Italiano" ],
  [ "Cz", "& # x010C; esky"],
  [ "El", "& # x0388; & # x03BB; & # x03BB;"  + 
  "& # X03B7; & # x03BD ; & # x03B1; & # x03C2;"  ]
  [ "Er", "& # x05E2; & # x05D1; & # x05E8; & # x05D9; & # x05EA;"  ]];
  • Definieren Sie "normal" und optional die "Caps Lock" ed "Shift" ed "AltGr" ed und "AltGr + Shift" ed-Arrays. Es gelten folgende Regeln:
    • Der Name jedes Array muss mit dem Sprachkürzel und dem Unterstrich beginnen.
    • Namen von Arrays mit Werten Symbole für eine Tastatur mit "Caps Lock" gedrückt muss ein Ende haben mit repräsentieren "Caps". 
        // Tschechische Layout:
 
  Cz_caps: [ "& # x003B; "  , ..., "& # X002D; "  ];
    • Namen von Arrays mit Werten Symbole für eine Tastatur mit "Shift" gedrückt muss ein Ende haben mit darstellt "Shift". 
        Cz_shift: [ "& # x00BA; "  , ..., "& # X005F; "  ];
    • Namen von Arrays mit Werten Symbole für eine Tastatur mit "AltGr" gedrückt muss ein Ende haben mit darstellt "alt_gr." 
        Cz_alt_gr: [..., "& # x0021;"  "& # X002F;"  ];
    • Namen von Arrays mit Werten Symbole für eine Tastatur mit der "AltGr" und "Shift" -Taste gedrückt bilden, müssen am Ende mit "alt_gr_shift." 
        Cz_alt_gr_shift: [ "& # x007E; "  , ..., "& # X003F; "  ];
    • Namen von Arrays mit Werten Symbole für eine Tastatur normalen Zustand darstellt - also ohne Zusatztasten gedrückt - ". Normal" muss enden 
        Cz_normal: [ "& # x003B; "  , ..., "& # X002D; "  ];
    • Jedes Array muss genau 48 Einträge haben, die jeweils ein entweder die hexadezimale der Wert des entsprechenden Symbols oder, im Fall eines toten Schlüssel, die von Array des Hex - Wert Bestehend für die dieser toten Symbol und dem Namen des eigenen der folgenden vordefinierten Arrays:
      • Acute (?)
      • Breve (˘)
      • Caron ()
      • Cedilla (?)
      • Circumflex (^)
      • DialytikaTonos (, dialytika tonos, kombiniert akute + Umlaut)
      • DotAbove (˙, Zugang dot die oben)
      • DoubleAcute (˝, die Doppel akut)
      • Grave ( `)
      • Ogonek (˛)
      • RingAbove (°, Ring der oben)
      • Tilde (~)
      • Umlaut (?)

      Auch die Macron (ˉ) diakritischen von Array ist verfügbar über die Datei in dem Ordner 1 vkboard of-the macron.txt das Archiv . Es ist nicht mit dem Haupt-Skript enthalten, da kein Layout Ich weiß, es als toter Schlüssel implementiert. 

        Cz_alt_gr: [[ "& # x0060 ;"  "Grave"] // tot Schlüssel 
  "& # X0021;"
  ... // Einfache Schlüssel
    • Arrays sind mit dem Layout abgebildet gemäß der folgenden Darstellung, wo Zahlen innerhalb von Zellen sind die Array-Indizes.

      Array-to-Key Mapping

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

    Folgende Layouts Die sind ein in die Vollen und schlanke Tastatur - Varianten gebaut. Die Zahl / Index neben dem Layout-Name ist der Layout-Index in der IBM Globalisierung Datenbank:

    • Englisch (International, US) - 103P
    • Die kanadische (mehrsprachig Standard) - vom Wikipedia - Artikel auf genommen Tastaturlayouts
    • Deutsch - 129
    • Französisch - 189
    • Spanisch - 173
    • Italienisch - 142
    • Russisch - 443
    • Tschechien - 243
    • Griechisch - 319
    • Hebräisch - 212

    24 andere Layouts sind in einem separaten Layout zur Verfügung Packung, die in der gefunden werden kann Ordner 5 layout_pack in-the Archiv . Es umfasst:

    Bitte beachten Sie die Datei readme.txt in der 5-layout_pack Ordner im Archiv für Anweisungen in Bezug auf diese Layouts.

Erstellen Sie Ihre eigenen Tastaturlayout

Vielleicht möchten Sie eine benutzerdefinierte Tastenlayout zu erstellen. Es gibt zwei Möglichkeiten, dies zu erreichen:

  1. Verwenden Sie atm.js als Vorlage; es ist das einfachste Skript von vier. Numpad_atm der Ordner die in Siehe das Archiv für weitere Details. Kurz gesagt, ist das Skript Fluss wie folgt:

    • Erstellen Sie das äußere Feld. 

        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 solid" + 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;

 ...

    • Die Tasten sind mit dem Erstellen der _setup_key Methode. 

        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 = container_id + "___pad_7";

    • Die gesamte Ausgabe in die Route der _generic_callback_proc Methode. Das Für VATMpad das Objekt wird das dies die in der fertig _set_key_state Methode der Auffrischung des 'während' das Layout. 

        diese ._setup_event (key_sub, 'mousedown-' , 
  diese ._generic_callback_proc);

    • Rufen Sie die Callback-Funktion. Dies geschieht, wenn der Benutzer "drückt" einen "Schlüssel". 

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

  vkboard.Callback (val);
 }

      Beispielanordnung

Rufen Sie aus dem Jenseits

Eine natürliche Eigenschaft, die alle Benutzer von einem Textfeld erwarten ist die Möglichkeit, den Text an einer beliebigen Position innerhalb eines Feldes zu bearbeiten. Es ist jedoch SO unmöglich unmöglich mit einer Funktion beschrieben zu tun , früher , das die nur anhängt oder Symbole entfernt vom Ende des Textes. Das folgende Skript ist ein Versuch, eine kompatible Callback-Funktion zu schreiben, die die beschriebene Aufgabe zu erfüllen. Es ist an der Diskussion im thescripts.com Forum basiert weitgehend. 

  <HEAD>
  <Script type = "text / javascript "> <! -
  var geöffnet = false,

  Einfügungen = -1, // Auswahl Start 
  insertionE = 0;
  // Auswahl 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 Callback - Funktion:
 
  //
   Funktion keyb_callback (ch)

  {
  var val = text.value;

  Schalter (ch)

  {
  Fall "Backspace":

  if (val.length)

  {
  var Span = null;

  if (document.selection)

  . Span = document.selection.createRange () duplizieren ();
  if (Spanne && span.text.length> 0)

  {
  span.text = "";
  getCaretPositions (Text);
  }
  sonst deleteAtCaret (Text);

  }
  brechen;

  Fall "<":

  if (Einfügungen> 0)

  setRange (Text, Einfügungen - 1, insertionE - 1);

  brechen;

  Fall ">":

  if (insertionE <val.length)

  setRange (Text, Einfügungen + 1, insertionE + 1);

  brechen;

  Fall "/ \\":
 
   if (standr!) brechen;
 
   var vorh = val.lastIndexOf ( "\ n ", Einfügungen) + 1;
 
   var pprev = val.lastIndexOf ( "\ n ", zurück - 2);
 
   var next = val.indexOf ( "\ n ", Einfügungen); 
   if (nächste == -1) next = val.length; 
   var Nnext = next - Einfügungen;
 
   wenn (i> next)
 
   {
 
   prev = val.lastIndexOf ( "\ n" , Einfügungen - 1) + 1;
 
   pprev = val.lastIndexOf ( "\ n" , zurück - 2);
 
   }
 
   // Anzahl der Zeichen in der aktuellen Zeile auf der linken Seite des caret: 
   var links = Einfügungen - zurück;
 
   // Länge des i.
  line:
 
   var plen = i.Vj. - pprev - 1;
 
   // Anzahl der Zeichen in der i.
  Linie
  
   // Das Recht des caret:
 
   var rechts = (plen <= links )?  1: (plen - links);
 
   var change = links + rechts;
 
   setRange (Text, Einfügungen - Änderung, insertionE - Änderung); 
   brechen;
 
   Fall "\\ /":
 
   if (standr!) brechen;
 
   var vorh = val.lastIndexOf ( "\ n ", Einfügungen) + 1;
 
   var next = val.indexOf ( "\ n ", Einfügungen); 
   var pNext = val.indexOf ( "\ n ", neben + 1);
 
   if (nächste == -1) next = val.length; 
   if (pNext == -1) pNext = val.length; 
   if (pNext <next) pNext = next; 
   wenn (i> next)
 
   prev = val.lastIndexOf ( "\ n" , Einfügungen - 1) + 1;
 
   // Anzahl der Zeichen in der aktuellen Zeile auf der linken Seite des caret: 
   var links = Einfügungen - zurück;
 
   // Länge der nächsten Zeile:
 
   var nLen = pNext - next;
 
   // Anzahl der Zeichen in der nächsten Zeile auf der linken Seite des Cursors: 
   var rechts = (nLen <= links )?  0: (nLen - links - 1);
 
   var change = (nächste - Einfügungen) + nLen - rechts; 
   setRange (Text, Einfügungen + Veränderung, insertionE + ändern); 
   brechen;
 
   Standard:
 
   insertAtCaret (Text,
  
   (Ch == "Enter" (window.opera '\ r \ n': '\ n'): ch ??)); 
   }
 
   }
 
   }
 
 
   // Diese Funktion ruft die Position (in Zeichen, bezogen auf 
   // Der Anfang des Textes) von der Edit - Cursor (Caret), oder, wenn 
   // Der Text wird in der TEXTAREA-, ausgewählt , die Start- und Endposition 
   // Von der Auswahl.
 
   //
 
   Funktion getCaretPositions (Strg)
 
   {
 
   var CaretPosS = -1, CaretPosE = 0;
 
   // Mozilla Art und Weise:
 
   if (ctrl.selectionStart || (ctrl.selectionStart == '0'))
 
   {
 
   CaretPosS = ctrl.selectionStart;
 
   CaretPosE = ctrl.selectionEnd;
 
   Einfügungen = CaretPosS == -1?
  CaretPosE: CaretPosS;
 
   insertionE = CaretPosE;
 
   }
 
   // IE Weg:
 
   else if (document.selection && ctrl.createTextRange)
 
   {
 
   var start = end = 0;
 
   versuchen
 
   {
 
   start =
  
   Math.abs (
 
   document.selection.createRange (). moveStart ( "Zeichen ",  
   -10000000));
  // Start
 
   if (Start> 0)
 
   {
 
   versuchen
 
   {
 
   var endReal =
  
   Math.abs (
 
   ctrl.createTextRange (). MoveEnd ( "Zeichen ",  
   -10000000));
 
   var r = document.body.createTextRange ();
 
   r.moveToElementText (ctrl);
 
   var STest =
  
   Math.abs (r.moveStart ( "Zeichen", -10000000)); 
   var eTest =
  
   Math.abs (r.moveEnd ( "Zeichen", -10000000)); 
   if ((ctrl.tagName.toLowerCase ()! = 'input') &&  
   (ETest - endReal == STest))
 
   Start - = STest;
 
   }
 
   catch (err) {}
 
   }
 
   }
 
   catch (e) {}
 
   versuchen
 
   {
 
   end =
  
   Math.abs (
 
   document.selection.createRange (). MoveEnd ( "Zeichen ",  
   -10000000));
  // end
 
   if (end> 0)
 
   {
 
   versuchen
 
   {
 
   var endReal =
  
   Math.abs (
 
   ctrl.createTextRange (). MoveEnd ( "Zeichen ",  
   -10000000));
 
   var r = document.body.createTextRange ();
 
   r.moveToElementText (ctrl);
 
   var STest =
  
   Math.abs (r.moveStart ( "Zeichen", -10000000)); 
   var eTest =
  
   Math.abs (r.moveEnd ( "Zeichen", -10000000)); 
   if ((ctrl.tagName.toLowerCase ()! = 'input') &&  
   (ETest - endReal == STest))
 
   Ende - = STest;
 
   }
 
   catch (err) {}
 
   }
 
   }
 
   catch (e) {}
 
   Einfügungen = Start;
 
   insertionE = Ende
 
   }
 
   }
 
   Funktion setRange (ctrl, Beginn, Ende ) 
   {
 
   if (ctrl.setSelectionRange) // Standard - Weg ( Mozilla, Opera, ...) 
   {
 
   ctrl.setSelectionRange (Beginn, Ende);
 
   }
 
   else // MS IE
 
   {
 
   var Bereich;
 
   versuchen
 
   {
 
   range = ctrl.createTextRange ();
 
   }
 
   catch (e)
 
   {
 
   versuchen
 
   {
 
   range = document.body.createTextRange ();
 
   range.moveToElementText (ctrl);
 
   }
 
   catch (e)
 
   {
 
   Bereich = null;
 
   }
 
   }
 
   if (Bereich!) return;
 
   range.collapse (true);
 
   range.moveStart ( "Zeichen", Start) ; 
   range.moveEnd ( "Zeichen", Ende - Start); 
   range.select ();
 
   }
 
   Einfügungen = Start;
 
   insertionE = Ende;
 
   }
 
   Funktion deleteSelection (Strg)
 
   {
 
   if (Einfügungen == insertionE) return;
 
   var tmp =
  
   (Document.selection &&
  
   ! Window.opera)?
  ctrl.value.replace (/ \ r / g, ""): ctrl.value; 
   ctrl.value =
  
   tmp.substring (0, Einfügungen) + tmp.substring (insertionE,
  
   tmp.length);
 
   setRange (ctrl, Einfügungen, Einfügungen) ; 
   }
 
   Funktion deleteAtCaret (Strg)
 
   {
 
   if (Einfügungen! = insertionE)
 
   {
 
   deleteSelection (ctrl);
 
   Rückkehr;
 
   }
 
   if (Einfügungen == insertionE)
 
   Einfügungen = Einfügungen - 1;
 
   var tmp =
  
   (Document.selection &&
  
   ! Window.opera)?
  ctrl.value.replace (/ \ r / g, ""): ctrl.value; 
   ctrl.value =
  
   tmp.substring (0,
  
   Einfügungen) + tmp.substring (insertionE, tmp.length ); 
   setRange (ctrl, Einfügungen, Einfügungen) ; 
   }
 
   // Diese Funktion fügt Text an der Caret Position: 
   //
 
   Funktion insertAtCaret (ctrl, val)
 
   {
 
   if (Einfügungen = insertionE!) deleteSelection (ctrl); 
   if (isgecko && document.createEvent &&! window.opera ) 
   {
 
   var e = document.createEvent ( "Keyboard" ); 
   if (e.initKeyEvent && ctrl.dispatchEvent)
 
   {
 
   e.initKeyEvent ( "keypress", // in DOMString typeArg, 
   false // in boolean canBubbleArg,
 
   true // in boolean cancelableArg,
 
   null, // in nsIDOMAbstractView viewArg,
 
   false // in boolean ctrlKeyArg,
 
   false // in boolean altKeyArg,
 
   false // in boolean shiftKeyArg,
 
   false // in boolean metaKeyArg,
 
   null, // Schlüsselcode;
 
   val.charCodeAt (0));
  // Char - Code.
 
   ctrl.dispatchEvent (e);
 
   }
 
   }
 
   sonst
 
   {
 
   var tmp =
  
   (Document.selection &&
  
   ! Window.opera)?
  ctrl.value.replace (/ \ r / g, ""): ctrl.value; 
   ctrl.value =
  
   tmp.substring (0,
  
   Einfügungen) + val + tmp.substring (Einfügungen , 
   tmp.length);
 
   }
 
   setRange (ctrl, Einfügungen + val.length, Einfügungen + val.length); 
   }
 
   // -> </ SCRIPT>
 
  </ HEAD>
 
  <BODY>
 
   ...
 
   <- Vergessen Sie nicht , diese "Onclick " und "onkeyup ': -> 
   <TEXTAREA- onkeyup = "getCaretPositions (diese );" Onclick = "getCaretPositions (this);" id = "Textfeld" rows = " 12" cols = "50">
 
   </ TEXTAREA->
 
   ...
 
  </ BODY>

Beachten Sie, dass die Auf- und Abwärtspfeile auf einer virtuellen Tastatur arbeiten nur auf standardkonformen Browsern! Berücksichtigen Sie dies bei der Touch-Screen-Anwendungen. Sie können das Skript zu testen , indem Sie die 2-full.html die edit-Datei gefunden! Vkboard im Ordner des angeschlossenen Archiv . Basic - Rückruf wird in gezeigt , 1-simple.html der Editierung .

Tipps und Tricks

Fluss das Script ganz einfach ist, so hoffe ich , von IT wird der BE von schwer , nicht in sie einzutauchen. Hier ist ein paar Worte auf ein paar knifflige Stellen.

  • Event - Set-up. Wir müssen beide MS IE und W3C-DOM-Event-Modelle verarbeiten. 

      _setup_event: function (Elem, eventtype, handler)
 {
  return (elem.attachEvent? // MS IE Weg
 
  elem.attachEvent ( "on" + eventtype, Handler):
  ((Elem.addEventListener) // W3C Weg 
  elem.addEventListener (eventtype, Handler, false) : null));
 }

  • Key Container Set-up. Besteht aus Schlüssel jeweils die "äußere" DIV - wo Klausel wir die Menge der oben, links, die Breite und Höhe die einzigen Parameter - und das "mit inneren" DIV , die , die die andere die Polsterung, Rahmen und Farbparameter akzeptiert. Wir nutzen diese eine komplexe Konstruktion das Box-Modell Problem der modernen Browsern zu umgehen. Beachten Sie, dass die JavaScript-Lösung ist. Wenn Sie das Box-Modell Problem mit CSS zu vermeiden möchten, können Sie möchten den Artikel von Trenton Moss zu sehen (siehe Punkt # 6). 

      _setup_key: function (Eltern, id, oben, links, Breite, Höhe,
  text_align, LINE_HEIGHT, font_size,
  font_weight, padding_left, padding_right)
 {
  var existiert = document.getElementById (id);

  // Outer DIV:
 
  var key =
 
  existiert?  exists.parentNode: document.createElement ( "DIV") ;
  diese ._setup_style (Schlüssel,
 
  besteht, oben, links, Breite! , Höhe, "absolute");
  // Inner DIV:
 
  var key_sub = existiert?
  existiert: document.createElement ( "DIV") ;
  key.appendChild (key_sub);  parent.appendChild (key);
  diese ._setup_style (key_sub,
 
  ! Existiert "", "" , "", LINE_HEIGHT, "relativ",
  text_align, LINE_HEIGHT, font_size, font_weight,
  padding_left, padding_right);
  key_sub.id = id;
  Rückkehr key_sub;

 }

  • Deaktivieren der Inhaltsauswahl. Dieses ist sehr wichtig, auf Grund der sehr hohen Schreibgeschwindigkeit, die einige Leute erreichen, und als Ergebnis der unvermeidlichen vkeyboard Inhaltsauswahl. ein diese anstelle der KÖNNEN die verwendeten UNSELECTABLE (MS IE) und -moz-user-select (die Gecko-basierten Browsern) Eigenschaften aufweisen . 

      diese ._setup_event (kb_main "selectstart" ,
  Funktion (event)
 
  { 
  return false;
 
  });
 diese ._setup_event (kb_main "mousedown-" ,
  Funktion (event)
 
  { 
  if (Event.preventDefault)

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

Code

Virtual Keyboard Features auf einen Blick

  • Ein komplettes JavaScript-Toolkit für jeden einzelnen Aspekt einer realen Tastatur Gerät simuliert
  • Compact (42,8 Kb - Druck volle Variante) Skript, das keine Bilder benötigt, für schnellere Download
  • Works und schaut auf die gleiche Weise auf allen gängigen Browsern, getestet auf Mozilla Firefox 1.5 / 2, Opera 7.5 / 9.22, Safari 3, MS IE 6/7
  • Sehr einfache Set-up-Verfahren
  • Autarke, ohne externe Abhängigkeiten
  • Anpassbare Schriftart, Schriftgröße und Farben; perfekt für skinable Umgebungen
  • Mehrere Varianten stehen zur Verfügung, einschließlich der vollständigen Tastatur, schlank vollständige Tastatur, Numpad und ATM-Stil numpad
  • Komprimierte Skripte werden gebündelt, dh vollständige Skript: 42,8 Kb, schlank: 43 Kb, Numpad: 9.30 Kb, atm-Numpad: 8,62 Kb
  • Zehn häufig verwendete Tastaturlayouts gebündelt werden mit den vollständigen und schlanke Skripte, 24 weitere Layouts sind in der mitgelieferten Layout Pack
  • Flexible Installationsoptionen, dh eine beliebige Anzahl von vkeyboards pro Seite, einstellbar Rückrufe
  • Open-Source-Skript unter der zlib / libpng-Lizenz vertrieben, was bedeutet, dass es auch auf kommerziellen Seiten kostenlos genutzt werden kann

Script Anforderungen

Jeder Browser, ist sich dessen bewusst:

  • JavaScript (Implementierung kompatibel mit ECMAScript Edition 3)
  • W3C DOM Level 1
  • CSS Stufe 1 (zumindest die meisten der Elemente)
  • W3C oder MS IE-Event-Modell