• View our reviews on Hot Scripts
  • JS Tutorial

Recent Comments

Powered by Disqus

Back to articles

On screen Keyboard

Keyboard class creates an onscreen keyboard for websites. It emulates normal keyboard behavior by providing functions like Tab, Capslock, Shift, Enter, Backspace, AltGr, Home and End, and it can manipulate data in textareas and input fields with text or password type.

Keyboard outlook is adjustable and users can be allowed to change size and language of keyboard

Package contains keyboard.js and keyboard.packed.js (packed javascript) and keymaps.js (file with different keymaps, where you can comment out or delete the ones, you won't use), and example.html, to demonstrate keyboard customizing and adding keymaps from keymaps.js



Example codes

<form id='form' action='' method='post'>
<p>Input text: <input type='text' name='text'/></p>
<p>Input pass: <input type='password' name='pass'/></p>
<p><textarea rows='5' cols='20' name='textarea'></textarea></p>
<p><input type='submit' value='submit'/></p>
<div id='keyboard'></div>
<!-- main class -->
<script type="text/javascript" src="./keyboard.js" ></script>
<!-- additional keyboard languages (keymaps) -->
<script type="text/javascript" src="./keymap.js" ></script>
<script type="text/javascript">
var kb = new keyboard("keyboard");
for(var i in maps)
    kb.add_keymap(i, maps[i]);

Examples in action

Example scripts provided with package in action:

Method list


Back to method list

Method namenew keyboard(id, config);
DescriptionProvide container and configuration for keyboard
Input parameters

string id - id of div element, which will contain keyboard

json config - Json structure with configuration properties

  • int width - width of one unit (small key button) in pixels (default: 30)
  • int height - height of one unit (small key button) in pixels (default: 30)
  • string borderColor - color of borders of buttons and keyboard (default: #808080)
  • string backgroundColor - color of background of buttons and keyboard (default: #d3d3d3)
  • int borderWidth - width of borders of buttons and keyboard in pixels. Distance between buttons is also determined by this value(default: 2)
  • int borderStyle - css style of borders of buttons and keyboard (default: solid)
  • int borderRadius - radius of borders of buttons in pixels, works in browsers which support border radius.(default: 5)
  • string fontColor - color of font of buttin names (default: black)
  • string keymap - default language layout. us is integrated in class source, others languages must be added separately (default: 'us')
  • bool allowChangeKeymap - if true, users are allowed to change language layout (default: 'true')
  • bool allowChangeSize - if true, users are allowed to change size of keyboard (default: 'true')
  • string position - css position like relative, absolute, fixed (default: 'relative')
Example input
var kb = new keyboard("keyboard", 
	width: 50,
	height: 40,
	backgroundColor : "green"

Add keymap

Back to method list

Method nameadd_keymap(key, map);
DescriptionAdd new language layout or overwrite existing
Input parameters

string key - name of keymap, locale, likve us or gb, lv

json map - map of keys in a json structure. Map must contain element name, which will be showen to users and element symbols, which should contain 47 elements, representing keyboard keys (excluding function keys). Each symbol element can contain up to 4 symbols. First one is default symbol, second used with Shift or Capslock button, third used with AltGr button and fourth is a combination of Shift and AltGr

Show keyboard

Back to method list

Method nameshow();

generates keyboard in container provided with constructor

Keyboard isn't generated automatically with constructor, so it would be possible to add keymaps and load the default keymap

Latest changes

  • June 17, 2011 - Added HTML5 input support

Rate us

Like our script? Rate it at JavaScript > Hot Scripts

Try it out and Rate on


JS classes support forum or comments below

You may also be interested in:

Powered by

blog comments powered by Disqus