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

JavaScript Virtual Keyboard

Virtual keyboard bound to a TEXTAREA field

Introduction

Family e-mails at Athens. It's good if someone in your family speaks English. If you can't find a keyboard with a Greek layout? I wish I had another keyboard. This article presents the Virtual Keyboard that solves this usability problem. Can be stated as follows:

  • This is a web-based e-mail address that can be used worldwide.
  • Sensor - hand-held PCs, smartphones, etc. - or with remote controls such as mice, e-pens, etc. being the only input devices.
  • Protect users from keylogger-type spyware.

Installation of the Virtual Keyboard requires a casual knowledge of HTML and JavaScript. WOMC DOM Level 1, CSS Level 1 and the DOM / Microsoft Internet Explorer event model. Virtual Keyboard is an open-source script distributed under the zlib / libpng license.

Setup

Six easy steps:

  1. Download the source archive .

  2. Choose your installation:

    • vkboard.js ( 1-vkboard folder in the archive) is the primary script. Full keyboard is simulated as follows:

      Screenshot - jvk-full.jpg

    • vkboards.js (2-vkboard_slim folder) left keyboard keyboard keyboard Drop-down menu, like in the previous variant.

      Screenshot - jvk-slim.jpg

    • If you have a touch screen (UMPC, touchscreen kiosk, etc.) or if you have 4 or more layouts installed

    • vnumpad.js (3-numpad_full folder) is the numpad part of the keyboard.

      numpad variant

    • vatmpad.js (4-numpad_atm folder) is a stripped number.

      numpad_atm variant

  3. Include this link in your HTML page.
     < HTML > < HEAD > < SCRIPT type =" text/javascript" src =" vkboard.js" > </ SCRIPT > ... < / HEAD > ... 

    Two script files are available:

    • vkboard.js / vkboards.js / vnumpad.js / vatmpad.js are the original script. If you are looking for something to do.
    • vkboardc.js / vkboardsc.js / vnumpadc.js / vatmpadc.js is a compressed version of the script, respectively 30.5% / 30.5% / 39.8% / 39.5% less than the original. This is the file you should use on the web.
  4. Define a callback function:

      < HTML > < HEAD > < SCRIPT type = " text / javascript" src = " vkboard.js" > </ SCRIPT > < SCRIPT > // Minimal callback function:
      function keyb_callback ( char ) {
      // Let ' s bind vkeyboard to the <TEXTAREA>
     
      // with id = " textfield" :
      var text = 
      document.getElementById ( " textfield" ), val = text.value;
      switch (ch)
      {
      case " BackSpace" :
      var min = (val.charCodeAt (val.length - 1 ) == 10 )?  2 : 1;
      text.value = val.substr (0, val.length - min);
      break;
      case " Enter" :
      text.value + = " \ n" ;
      break;
      default:
      text.value + = ch;
      }
      }
      </ SCRIPT > < / HEAD >
    
      ... 

    The callback function must have one or two parameters. This is the first parameter of the vkeyboard script. The second parameter is that it is called the callback. It can be useful for multiple vkeyboards. Note that this is the most basic callback function. An example of a more advanced code snippet is given later .

  5. Define a container for the keyboard, which must be an empty DIV or SPAN .
      < Html > ...
      < BODY > ...
      < TEXTAREA id = " textfield" rows = " 10" cols = " 50" > < / TEXTAREA > < DIV id = " keyboard" > < / DIV > < / BODY > < / HTML >
     
  6. Finally, show the keyboard.
      < BODY onload = " new VKeyboard (" keyboard ", keyb_callback);" > <! - VKeyboard is shown on load, bound to container with
     
       id = "keyboard" and with callback function "keyb_callback" ->
     

    Of course, the creation of the VKeyboard is a numpad: VNumpad , ATM-style numpad: VATMpad - can be used.

API

It VKeyboard you to control your VKeyboard constructor. Here is the list of defaults.

 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 

Please be careful when upgrading vkeyboard from earlier versions. Always check the number / flow of the parameters. VNumpad and VATMpad have a limited set of parameters:

 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? 

It is not allowed by default, it is not a switch. VKeyboard has the following public methods.

  • Show : Shows or hides the whole vkeyboard. This is a Boolean value that states whether to show or hide.
      vkb.Show ( true );  // Shows the vkeyboard
     
      vkb.Show ( false );  // Hides the vkeyboard
     
      vkb.Show ();  // Shows the vkeyboard again.
      Action is by default.
     
  • ShowNumpad : Shows or hides the numpad. It is a Boolean value that dictates whether to show or hide.
      vkb.ShowNumpad ( true );  // Shows the numpad
     
      vkb.ShowNumpad ( false );  // Hides the numpad
     
      vkb.ShowNumpad ();  // Shows the numpad again.
      This action is by default.
     
  • " set-param" >SetParameters : Allows you to adjust the parameters at runtime. The function accepts the number of values ​​in pairs: the vkeyboard parameter name and parameter value.
      // Adjusting single parameter:
     
      vkb.SetParameters ( " font-color" , " # F0A050" );
     // Adjusting two parameters at once:
     
      vkb.SetParameters ( " font-name" , " Arial" , " font-color" , " # F0A050" ); 

    Valid parameter names are:

    • callback - callback function reference. Valid parameter value: reference to any function with 1 or 2 formal parameters
    • font-name - name of keyboard font. Valid parameter value: empty name string (= default font)
    • font-size - font size in pixels. Valid parameter value: font size in pixels
    • font-color - font color. Here is a valid hexadecimal digit
    • dead-color - color of the dead keys
    • base-color - color of the keyboard base
    • key-color - color of the keys
    • selection-color
    • border-color - color of the key border
    • inactive-border-color
    • inactive-key-color - background color of the disabled key
    • lang-cell-color - language
    • click-font-color -border
    • click-key-color - color
    • click-border-color
    • show-click - show key flash on click. Valid parameter value: true or false
    • layout - index (0-based integer) of the layout to switch to. Use it to programmatically switch layouts

Test suite

The script comes with the following samples:

  1. 1-edit-simple.html . Virtual Keyboard.

  2. 2-edit-full.html . It is not a function. If you are on the TEXTAREA , you can use it. This sample shows how the JavaScript Virtual Keyboard should normally be used. All other samples are derived from this one.

  3. 3-edit-translator.html . If you are a keyboard It’s a real keyboard, not a mouse. Characters will not be typed in vkeyboard.

  4. 4-test-change.html . Sample of the SetParameters API. Watch how vkeyboard changes its color.

  5. 5-test-fly.html . Sample shows how to handle multiple INPUT fields with a single vkeyboard.

  6. 6-test-fly-anonym.html . Almost all fields are allowed to follow. Where pages are not undesirable.

  7. 7-test-any-css.html . Sample shows. A special function, convert_to_px , is used to convert the arbitrary unit strings to pixel-based values. The following units are allowed: px , % , em , ex , pt , pc , cm , mm and in . Note that the convert_to_px function is still quite experimental. This is a way for the browser to view your browser screen. With any other browser, only px , % , em and ex can be used safely. Dots per inch - it is quite common for Windows machines.

  8. 8-test-scale.html . This sample shows how to sidestep the problem of Mozilla and MS IE browsers. It is zooms, that is, it makes changes, it means that it changes the size of the elements. It’s not a problem. In this sample, the script tracks the font-size and uses the SetParameters API to suitably scale the vkeyboard layout. This sample should be viewed only in Mozilla (Firefox) and MS IE. It’s not a problem. You can also overcome MSE's wrapper browsers. For example, MyIE2 (Maxthon) also implements a smart zoom. There is also an Opera-like page zoom behavior.

It can be found in the archive folder. It’s not a problem.

Creating your own language layout

Two easy steps:

  • It is usually an ISO 639-1 code for the language abbreviation that is used.
      avail_langs:
      [[ " Us" , " English (US)" ],
      [ " Ca" , " Canadian" ],
      [ " Ru" , " & # x0420; & # x0443; & # x0441;"
      +
      " & # x0441; & # x043A; & # x0438; & # x0439;"
      ],
      [ " De" , " Deutsch" ],
      [ " Fr" , " Fran & # x00E7; ais" ],
      [ " Es" , " Espa & # x00F1; ol" ],
      [ " It" , " Italiano" ],
      [ " Cz" , " & # x010C; esky" ] ,
      [ " El" , " & # x0388; & # x03BB; & # x03BB;"
      + 
      " & # x03B7; & # x03BD; & # x03B1; & # x03C2;"
      ],
      [ " He" , " & # x05E2; & # x05D1; & # x05E8; & # x05D9; & # x05EA;"
      ]]; 
  • Define "normal" and, optionally, the "Caps Lock" ed, "Shift" ed, "AltGr" ed and "AltGr + Shift" ed arrays. The following rules apply:
    • Each array's name must begin with the language abbreviation and the underscore symbol.
    • Caps Lock "must be with caps."
        // Czech layout:
       
        Cz_caps: [ " & # x003B;"
        , ..., " & # x002D;"
        ]; 
    • Keyboard with "Shift" pressed must end with "shift."
        Cz_shift: [ " & # x00BA;"
        , ..., " & # x005F;"
        ]; 
    • AltGr "pressed must end with" alt_gr. "
        Cz_alt_gr: [..., " & # x0021;"
        , " & # x002F;"
        ]; 
    • AltGr "and" Shift "keys pressed for end with alt_gr_shift."
        Cz_alt_gr_shift: [ " & # x007E;"
        , ..., " & # x003F;"
        ]; 
    • The keys are broken down with the "normal."
        Cz_normal: [ " & # x003B;"
        , ..., " & # x002D;"
        ]; 
    • The following are the arrays of the following predefined arrays:
      • Acute (?)
      • Breve ()
      • Caron (ˇ)
      • Cedilla (?)
      • Circumflex (^)
      • DialytikaTonos (΅, dialytika tonos, combined acute + umlaut)
      • DotAbove (˙, dot above)
      • DoubleAcute (˝, double acute)
      • Grave (`)
      • Ogonek ( Ogonek )
      • RingAbove (°, ring above)
      • Tilde (~)
      • Umlaut (?)

      Also, the Macron (ˉ) diacritic array is available via the macron.txt file in the 1-vkboard folder of the archive . It is not a dead key.

        Cz_alt_gr: [ [ " & # x0060;"
        , " Grave" ] , // dead key
       
        " & # x0021;"
        , ... // simple key
       
    • Arrays are mapped according to the following illustration, where are the array indices.

      array-to-key mapping

    • The "normal" array is mandatory; others are optional.

    The following layouts are built into the full and slim keyboard options. The following is the layout of the IBM Globalization database:

    • English (US International) - 103P
    • Canadian (multilingual standard) - taken from Wikipedia article on keyboard layouts
    • German - 129
    • French - 189
    • Spanish - 173
    • Italian - 142
    • Russian - 443
    • Czech - 243
    • Greek - 319
    • Hebrew - 212

    24 other layouts are available in the archive . It includes:

    Please see the readme.txt file in layouts.

Creating your own keyboard layout

You can create a custom key layout. There are two ways to achieve this:

  1. Use atm.js as a template; it is the simplest script of four. See the numpad_atm folder for more details. In short, the script is as follows:

    • Create the outer box.

        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;
      
       ... 
    • Create the keys with the _setup_key method.

        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" ; 
    • Route all output to the _generic_callback_proc method. For the VATMpad object, this is done in the _set_key_state method while refreshing the layout.

        this ._setup_event (key_sub, ' mousedown' , 
        this ._generic_callback_proc);
      
    • Invoke the callback function. This happens when the user "presses" a "key."

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

      Sample layout

Call from beyond

It is a natural concept. However, it is not possible. The following is a script. It is largely based on the discussion in the thecripts.com forum.

  <HEAD>
  <SCRIPT type = " text / javascript" > <! -
  var opened = false ,
  insertionS = -1, // selection start
 
  insertionE = 0 ;  // selection end
 
  var userstr = navigator.userAgent.toLowerCase ();
  var safari = (userstr.indexOf ( ' applewebkit' )! = -1);
  var gecko = (userstr.indexOf ( ' gecko' )! = -1) &&! safari;
  var standr = gecko ||  window.opera ||  safari;
  ...
  // Advanced callback function:
 
  //
   function keyb_callback (ch)
  {
  var val = text.value;
  switch (ch)
  {
  case " 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);
  }
  else deleteAtCaret (text);
  }
  break ;
  case " <" :
  if (insertionS> 0 )
  setRange (text, insertionS - 1 , insertionE - 1 );
  break ;
  case " >" :
  if (insertionE <val.length)
  setRange (text, insertionS + 1 , insertionE + 1 );
  break ;
  case " / \\":
 
   if (! standr) break;
 
   var prev = val.lastIndexOf (" \ n " , insertionS) + 1;
 
   var pprev = val.lastIndexOf (" \ n " , prev - 2);
 
   var next = val.indexOf (" \ n " , insertionS);
 
   if (next == -1) next = val.length;
 
   var nnext = next - insertionS;
 
   if (prev> next)
 
   {
 
   prev = val.lastIndexOf (" \ n " , insertionS - 1) + 1;
 
   pprev = val.lastIndexOf (" \ n " , prev - 2);
 
   }
 
   // number of chars in the caret line
 
   var left = insertionS - prev;
 
   // length of the prev.
  line:
 
   var plen = prev - pprev - 1;
 
   // number of chars in the prev.
  line to
  
   // the right of the caret:
 
   var right = (plen <= left)?
  1: (plen - left);
 
   var change = left + right;
 
   setRange (text, insertionS - change, insertionE - change);
 
   break;
 
   case " \\ / " :
 
   if (! standr) break;
 
   var prev = val.lastIndexOf (" \ n " , insertionS) + 1;
 
   var next = val.indexOf (" \ n " , insertionS);
 
   var pnext = val.indexOf (" \ n " , next + 1);
 
   if (next == -1) next = val.length;
 
   if (pnext == -1) pnext = val.length;
 
   if (pnext <next) pnext = next;
 
   if (prev> next)
 
   prev = val.lastIndexOf (" \ n " , insertionS - 1) + 1;
 
   // number of chars in the caret line
 
   var left = insertionS - prev;
 
   // length of the next line:
 
   var nlen = pnext - next;
 
   // number of chars
 
   var right = (nlen <= left)?
  0: (nlen - left - 1);
 
   var change = (next - insertionS) + nlen - right;
 
   setRange (text, insertionS + change, insertionE + change);
 
   break;
 
   default:
 
   insertAtCaret (text,
  
   (ch == " Enter " ? (window.opera? '\ r \ n': '\ n'): ch));
 
   }
 
   }
 
   }
 
 
   // This function retrieves the position (in chars, relative to
 
   // the start of the text of the edit cursor (caret), or, if
 
   // text is selected in the TEXTAREA, the start and end positions
 
   // of the selection.
 
   //
 
   function getCaretPositions (ctrl)
 
   {
 
   var CaretPosS = -1, CaretPosE = 0;
 
   // Mozilla way:
 
   if (ctrl.selectionStart || (ctrl.selectionStart == '0'))
 
   {
 
   CaretPosS = ctrl.selectionStart;
 
   CaretPosE = ctrl.selectionEnd;
 
   insertionS = CaretPosS == -1?
  CaretPosE: CaretPosS;
 
   insertionE = CaretPosE;
 
   }
 
   // IE way:
 
   else if (document.selection && ctrl.createTextRange)
 
   {
 
   var start = end = 0;
 
   try
 
   {
 
   start =
  
   Math.abs (
 
   document.selection.createRange (). moveStart (" character " ,
  
   -10000000));
  // start
 
   if (start> 0)
 
   {
 
   try
 
   {
 
   var endReal =
  
   Math.abs (
 
   ctrl.createTextRange (). moveEnd (" character " ,
  
   -10000000));
 
   var r = document.body.createTextRange ();
 
   r.moveToElementText (ctrl);
 
   var sTest =
  
   Math.abs (r.moveStart (" character " , -10000000));
 
   var eTest =
  
   Math.abs (r.moveEnd (" character " , -10000000));
 
   if ((ctrl.tagName.toLowerCase ()! = 'input') &&
  
   (eTest - endReal == sTest))
 
   start - = sTest;
 
   }
 
   catch (err) {}
 
   }
 
   }
 
   catch (e) {}
 
   try
 
   {
 
   end =
  
   Math.abs (
 
   document.selection.createRange (). moveEnd (" character " ,
  
   -10000000));
  // end
 
   if (end> 0)
 
   {
 
   try
 
   {
 
   var endReal =
  
   Math.abs (
 
   ctrl.createTextRange (). moveEnd (" character " ,
  
   -10000000));
 
   var r = document.body.createTextRange ();
 
   r.moveToElementText (ctrl);
 
   var sTest =
  
   Math.abs (r.moveStart (" character " , -10000000));
 
   var eTest =
  
   Math.abs (r.moveEnd (" character " , -10000000));
 
   if ((ctrl.tagName.toLowerCase ()! = 'input') &&
  
   (eTest - endReal == sTest))
 
   end - = sTest;
 
   }
 
   catch (err) {}
 
   }
 
   }
 
   catch (e) {}
 
   insertionS = start;
 
   insertionE = end
 
   }
 
   }
 
   function setRange (ctrl, start, end)
 
   {
 
   if (ctrl.setSelectionRange) // Standard way (Mozilla, Opera, ...)
 
   {
 
   ctrl.setSelectionRange (start, end);
 
   }
 
   else // MS IE
 
   {
 
   var range;
 
   try
 
   {
 
   range = ctrl.createTextRange ();
 
   }
 
   catch (e)
 
   {
 
   try
 
   {
 
   range = document.body.createTextRange ();
 
   range.moveToElementText (ctrl);
 
   }
 
   catch (e)
 
   {
 
   range = null;
 
   }
 
   }
 
   if (! range) return;
 
   range.collapse (true);
 
   range.moveStart (" character " , start);
 
   range.moveEnd (" character " , end - start);
 
   range.select ();
 
   }
 
   insertionS = start;
 
   insertionE = end;
 
   }
 
   function deleteSelection (ctrl)
 
   {
 
   if (insertionS == insertionE) return;
 
   var tmp =
  
   (document.selection &&
  
   ! window.opera)?
  ctrl.value.replace (/ \ r / g, " " ): ctrl.value;
 
   ctrl.value =
  
   tmp.substring (0, insertionS) + tmp.substring (insertionE,
  
   tmp.length);
 
   setRange (ctrl, insertionS, insertionS);
 
   }
 
   function deleteAtCaret (ctrl)
 
   {
 
   if (insertionS! = insertionE)
 
   {
 
   deleteSelection (ctrl);
 
   return;
 
   }
 
   if (insertionS == insertionE)
 
   insertionS = insertionS - 1;
 
   var tmp =
  
   (document.selection &&
  
   ! window.opera)?
  ctrl.value.replace (/ \ r / g, " " ): ctrl.value;
 
   ctrl.value =
  
   tmp.substring (0,
  
   insertionS) + tmp.substring (insertionE, tmp.length);
 
   setRange (ctrl, insertionS, insertionS);
 
   }
 
   // This function inserts text at the caret position:
 
   //
 
   function insertAtCaret (ctrl, val)
 
   {
 
   if (insertionS! = insertionE) deleteSelection (ctrl);
 
   if (isgecko && document.createEvent &&! window.opera)
 
   {
 
   var e = document.createEvent (" KeyboardEvent " );
 
   if (e.initKeyEvent && ctrl.dispatchEvent)
 
   {
 
   e.initKeyEvent (" keypress " , // 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, // key code;
 
   val.charCodeAt (0));
  // char code.
 
   ctrl.dispatchEvent (e);
 
   }
 
   }
 
   else
 
   {
 
   var tmp =
  
   (document.selection &&
  
   ! window.opera)?
  ctrl.value.replace (/ \ r / g, " " ): ctrl.value;
 
   ctrl.value =
  
   tmp.substring (0,
  
   insertionS) + val + tmp.substring (insertionS,
 
   tmp.length);
 
   }
 
   setRange (ctrl, insertionS + val.length, insertionS + val.length);
 
   }
 
   // -> </ SCRIPT>
 
  </ Head>
 
  <BODY>
 
   ...
 
   <- Don't forget this 'onclick' and 'onkeyup': ->
 
   <TEXTAREA onkeyup = " getCaretPositions ( this ); " onclick = " getCaretPositions ( this ); " id = " textfield " rows = " 12 " cols = " 50 " >
 
   </ TEXTAREA>
 
   ...
 
  </ Body>
 

Keyboard work only on standards-compliant browsers! Take this into account when creating touch screen applications. You can test the script for the attached archive . Basic callback is shown in 1-edit-simple.html .

Tips and tricks

Script flow is quite straightforward, so I’ve got it. Here is a couple of tricky places.

  • Event set-up . We need to handle both MS IE and W3C DOM event models.

      _setup_event: function (elem, eventType, handler)
     {
      return (elem.attachEvent? // MS IE way
     
      elem.attachEvent ( " on" + eventType, handler):
      ((elem.addEventListener)? // W3C way
     
      elem.addEventListener (eventType, handler, false ): null ));
     } 
  • Key container set-up. Each key consists of the "outer" DIV , where we set the border, the border and the bottom. The problem of modern browsers. Note that there is a javascript solution. Trenton Moss (see item # 6).

      _setup_key: function (parent, id, top, left, width, height,
      text_align, line_height, font_size,
      font_weight, padding_left, padding_right)
     {
      var exists = document.getElementById (id);
      // Outer DIV:
     
      var key = 
      exists?  exists.parentNode: document.createElement ( " DIV" );
      this ._setup_style (key, 
      exists, top, left, width, height, " absolute" );
      // Inner DIV:
     
      var key_sub = exists?  exists: document.createElement ( " DIV" );
      key.appendChild (key_sub);  parent.appendChild (key);
      this ._setup_style (key_sub, 
      ! exists, " " , " " , " " , line_height, " relative" ,
      text_align, line_height, font_size, font_weight,
      padding_left, padding_right);
      key_sub.id = id;
      return key_sub;
     } 
  • Disabling content selection. It is very important that you can achieve a vievboard content selection. It can be used instead of the UNSELECTABLE (MS IE) and -moz-user-select (Gecko-based browsers) properties.

      this ._setup_event (kb_main, " selectstart" ,
      function (event) 
      { 
      return false ; 
      });
     this ._setup_event (kb_main, " mousedown" ,
      function (event) 
      { 
      if (event.preventDefault)
      event.preventDefault (); 
      return false ; 
      });
    

Code

Virtual Keyboard features at a glance

  • A complete javascript toolkit
  • Compact (42.8 Kb - compressed full variant) script
  • Mozilla Firefox 1.5 / 2, Opera 7.5 / 9.22, Safari 3, MS IE 6/7
  • Very simple set-up procedure
  • External dependencies
  • Customizable font, font size and colors; perfect for skinable environments
  • Several variants are available, including full keyboard, slim full keyboard, numpad and ATM-style numpad
  • Compressed scripts are bundled, ie full script: 42.8 Kb, slim: 43 Kb, numpad: 9.30 Kb, atm-numpad: 8.62 Kb
  • Keyboard layouts are frequently used, 24 key layouts are bundled
  • Flexible installation options, adjustable page callbacks
  • It can be used free of charge

Script requirements

Any browser that is aware of:

  • JavaScript (implementation compliant with ECMAScript Edition 3)
  • W3C DOM Level 1
  • CSS Level 1 (at least, most of the elements)
  • W3C or MS IE event model