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

Familien-E-Mail zu Hause. Es ist gut, wenn jemand in deiner Familie Englisch spricht. Wenn Sie keine Tastatur mit einem griechischen Layout finden können? Ich wünschte, ich hätte eine andere Tastatur. Dieser Artikel beschreibt die virtuelle Tastatur, die dieses Usability-Problem löst. Es kann wie folgt angegeben werden:

  • Dies ist eine webbasierte E-Mail-Adresse.
  • Sensor - 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. WOMC 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) linke Tastatur. Dropdown-Menü, wie in der vorherigen Variante.

      Bildschirmfoto - jvk-slim.jpg

    • Wenn Sie einen Touchscreen 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 eine abgestreifte Nummer.

      numpad_atm Variante

  3. Fügen Sie diesen Link in Ihre HTML-Seite ein.
     < HTML > < HEAD > < SCRIPT type =" text/javascript" src =" vkboard.js" > </ SCRIPT > ... < / HEAD > ... 

    Es sind zwei Skriptdateien verfügbar:

    • vkboard.js / vkboards.js / vnumpad.js / vatmpad.js sind das ursprüngliche Skript. Wenn Sie etwas zu tun suchen.
    • vkboardc.js / vkboardsc.js / vnumpadc.js / vatmpadc.js ist eine komprimierte Version des Skripts, jeweils 30,5% / 30,5% / 39,8% / 39,5% weniger 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. Dies ist der erste Parameter des vkeyboard-Skripts. Der zweite Parameter ist der Rückruf. Es kann für mehrere vkeyboards nützlich sein. Beachten Sie, dass dies die grundlegendste Rückruffunktion ist. Ein Beispiel für ein fortgeschritteneres Code-Snippet wird später gegeben .

  5. Definieren Sie den 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 ist die Erstellung eines VKeyboard ein Nummernblock: VNumpad , ATM-style, ein Nummernblock: VATMpad .

API

Es VKeyboard Ihnen, Ihren VKeyboard Konstruktor zu steuern. Hier ist die Liste der Standardeinstellungen.

 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 

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 = 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? 

Es ist standardmäßig nicht erlaubt. VKeyboard verfügt über die folgenden öffentlichen Methoden.

  • Show : Blendet das gesamte vkeyboard ein oder aus. Dies ist ein boolescher Wert.
      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 : Blendet den Numpad ein oder aus. Es ist ein boolescher Wert, der angibt, ob angezeigt 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 der vkeyboard-Parameter zur Laufzeit. Die Funktion akzeptiert die Anzahl der Werte in Paaren: den Parameternamen und den Parameterwert des vkeyboard-Parameters.
      // 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. Wert von Parametern mit 1 oder 2 Formalparametern
    • font-name - Name der Tastaturschriftart. Gültiger Parameterwert: leerer Name String (= Standardschrift)
    • font-size - Schriftgröße in Pixel. Gültiger Parameterwert: Schriftgröße in Pixel
    • font-color - Schriftfarbe. Hier ist eine gültige hexadezimale Ziffer
    • dead-color - Farbe der toten Tasten
    • base-color - Farbe der Tastaturbasis
    • key-color - Farbe der Schlüssel
    • selection-color
    • border-color - Farbe des Tastenrands
    • inactive-border-color
    • inactive-key-color - Hintergrundfarbe des deaktivierten Schlüssels
    • lang-cell-color - Sprache
    • click-font-color Grenze
    • click-key-color - Farbe
    • click-border-color
    • 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 . Virtuelle Tastatur.

  2. 2-edit-full.html . Es ist keine Funktion. Wenn Sie auf dem TEXTAREA , können Sie es verwenden. Dieses Beispiel zeigt, wie die virtuelle Tastatur von JavaScript normalerweise verwendet werden sollte. Alle anderen Proben sind von diesem abgeleitet.

  3. 3-edit-translator.html . Wenn Sie Ihre Tastatur verwenden möchten Es ist eine echte Tastatur, keine Maus. Zeichen werden nicht in vkeyboard eingegeben.

  4. 4-test-change.html . Beispiel-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 alle Felder dürfen dort sein. Wo sind die Seitenwechsel unerwünscht?

  7. 7-test-any-css.html . Beispiel zeigt. Eine spezielle Funktion, convert_to_px , wird verwendet, um die willkürlichen 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. Es ist eine Möglichkeit für den Browser, es zu verteilen. Es kann sicher verwendet werden. Punkte pro Zoll - es ist ziemlich häufig für Windows-Maschinen.

  8. 8-Testskala.html . Dies ist ein Beispiel für das Problem von Mozilla und MS IE Browsern. Es ist Zoom, dh es ändert die Größe der font-size . Es ist kein Problem. In diesem Beispiel verfolgt das Skript die font-size und verwendet die API SetParameters um das vkeyboard-Layout entsprechend zu skalieren. Dieses Beispiel sollte nur in Mozilla (Firefox) und MS IE betrachtet werden. Es ist kein Problem. Sie können auch Wrapper-Browser überwinden. Zum Beispiel implementiert MyIE2 (Maxthon) auch einen intelligenten Zoom. Es gibt auch ein Opera-ähnliches Seiten-Zoom-Verhalten.

Es befindet sich im Archivordner. Es ist kein Problem.

Erstellen Sie Ihr eigenes Sprachlayout

Zwei einfache Schritte:

  • Es ist eine Rechtsnorm, dass es eine avail_langs .
      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:
    • Jedes einzelne Unterstreichungssymbol.
    • Caps Lock "muss mit Kappen sein."
        // Tschechisches Layout:
       
        Cz_caps: [ " & # x003B;"
        , ..., " & # x002D;"
        ]; 
    • Tastatur mit gedrückter "Shift" -Taste muss mit "shift" enden.
        Cz_shift: [ " & # x00BA;"
        , ..., " & # x005F;"
        ]; 
    • "AltGr" muss mit "alt_gr" enden
        Cz_alt_gr: [..., " & # x0021;"
        , " & # x002F;"
        ]; 
    • Die Tasten "AltGr" und "Shift" sind die Tasten, die mit "alt_gr_shift" enden.
        Cz_alt_gr_shift: [ " & # x007E;"
        , ..., " & # x003F;"
        ]; 
    • Wenn Sie auf der Tastatur sind, müssen Sie die Tasten mit der "normalen" drücken.
        Cz_normal: [ " & # x003B;"
        , ..., " & # x002D;"
        ]; 
    • Die folgenden sind die Arrays:
      • 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 verfügbar. Es ist kein toter Schlüssel.

        Cz_alt_gr: [ [ " & # x0060;"
        , " Grab" ] , // toter Schlüssel
       
        " & # x0021;"
        , ... // einfacher Schlüssel
       
    • Arrays werden gemäß den folgenden Abbildungen abgebildet, wobei die Array-Indizes sind.

      Array-zu-Key-Zuordnung

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

    Die folgenden Layouts sind in die vollständigen und schlanken Tastaturoptionen integriert. Das Folgende ist das Layout 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 im Archiv verfügbar. Es beinhaltet:

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

    Bitte lesen Sie die Datei readme.txt in Layouts.

Erstellen Sie Ihr eigenes Tastaturlayout

Sie können 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. Kurz gesagt, das Skript 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

Es ist ein natürliches Problem. Dies ist jedoch nicht möglich. Das Folgende ist ein Skript. Es basiert weitgehend auf der Diskussion im thecripts.com-Forum.

  <Kopf>
  <SCRIPT type = " text / javascript" > <! -
  var open = false ,
  InsertionS = -1, // Auswahl starten
 
  EinfügungE = 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 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 Caret-Zeile
 
   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 Caret-Zeile
 
   var links = InsertionS - prev;
 
   // Länge der nächsten Zeile:
 
   var nlen = pnext - nächstes;
 
   // Anzahl der Zeichen
 
   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>
 
   ...
 
  </ Körper>
 

Tastatur funktioniert nur mit standardkonformen Browsern! Berücksichtigen Sie dies bei der Erstellung von Touchscreen-Anwendungen. Sie können das Skript für das angehängte Archiv testen. Der grundlegende Rückruf wird in 1-edit-simple.html angezeigt .

Tipps und Tricks

Script Flow ist ziemlich einfach, also habe ich es. Hier sind ein paar knifflige Orte.

  • 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 ist, wo der Schlüssel eingestellt ist. Das Problem moderner Browser. Beachten Sie, dass es eine JavaScript-Lösung gibt. 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 Es ist sehr wichtig, dass Sie dies erreichen können. 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
  • Kompakte (42.8 Kb - komprimierte vollständige Variante) Skript
  • Mozilla Firefox 1.5 / 2, Opera 7.5 / 9.22, Safari 3, MS IE 6/7
  • Sehr einfaches Setup-Verfahren
  • Externe Abhängigkeiten
  • Anpassbare Schriftart, Schriftgröße und Farben; Perfekt für hautfreundliche Umgebungen
  • Mehrere Varianten sind verfügbar, einschließlich Numpad und ATM-artiges Numpad
  • Komprimierte Skripte sind gebündelt, dh vollständiges Skript: 42,8 Kb, schlank: 43 Kb, Nummernblock: 9,30 Kb, atm-Nummernblock: 8,62 Kb
  • Tastaturlayouts werden häufig als Layout-Paket verwendet,
  • Flexible Installationsoptionen, einstellbare Seitenrückrufe
  • Es kann kostenlos genutzt werden

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