Installation:

# NPM
$ npm install virtual-keyboard

# Bower
$ bower install virtual-keyboard

1. Include jQuery library and Keyboard in your head part.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="js/jquery.keyboard.js"></script>

2. Include jQuery UI and jQuery UI Theme.

<link href="//code.jquery.com/ui/1.9.0/themes/ui-darkness/jquery-ui.css" rel="stylesheet">
<script src="//code.jquery.com/ui/1.9.0/jquery-ui.min.js"></script>

3. Include the Keyboard CSS.

<link href="css/keyboard.css" rel="stylesheet">

4. Include jquery.mousewheel.js.

<script src="js/jquery.mousewheel.js"></script>

5. Markup

<input id="keyboard" type="text">

6. Initialize Keyboard

$(function(){
$('#keyboard').keyboard();
});

6. Options and strategies.

// set this to ISO 639-1 language code to override language set by the layout
// language defaults to 'en' if not found
language: null,
rtl: false,

// *** choose layout & positioning ***
layout: 'qwerty',
customLayout: null,

position: {
  // optional - null (attach to input/textarea) or a jQuery object (attach elsewhere)
  of: null,
  my: 'center top',
  at: 'center top',
  // used when 'usePreview' is false (centers the keyboard at the bottom of the input/textarea)
  at2: 'center bottom'
},

// allow jQuery position utility to reposition the keyboard on window resize
reposition: true,

// preview added above keyboard if true, original input/textarea used if false
usePreview: true,

// if true, the keyboard will always be visible
alwaysOpen: false,

// give the preview initial focus when the keyboard becomes visible
initialFocus: true,

// avoid changing the focus (hardware keyboard probably won't work)
noFocus: false,

// if true, keyboard will remain open even if the input loses focus, but closes on escape
// or when another keyboard opens.
stayOpen: false,

// if true, keyboard will not close if you press escape.
ignoreEsc: false,

css: {
  // input & preview
  input: 'ui-widget-content ui-corner-all',
  // keyboard container
  container: 'ui-widget-content ui-widget ui-corner-all ui-helper-clearfix',
  // keyboard container extra class (same as container, but separate)
  popup: '',
  // default state
  buttonDefault: 'ui-state-default ui-corner-all',
  // hovered button
  buttonHover: 'ui-state-hover',
  // Action keys (e.g. Accept, Cancel, Tab, etc); this replaces 'actionClass' option
  buttonAction: 'ui-state-active',
  // Active keys (e.g. shift down, meta keyset active, combo keys active)
  buttonActive: 'ui-state-active',
  // used when disabling the decimal button {dec} when a decimal exists in the input area
  buttonDisabled: 'ui-state-disabled',
  buttonEmpty: 'ui-keyboard-empty'
},

// *** Useability ***
// Auto-accept content when clicking outside the keyboard (popup will close)
autoAccept: false,
// Auto-accept content even if the user presses escape (only works if `autoAccept` is `true`)
autoAcceptOnEsc: false,

// Prevents direct input in the preview window when true
lockInput: false,

// Prevent keys not in the displayed keyboard from being typed in
restrictInput: false,
// Additional allowed characters while restrictInput is true
restrictInclude: '', // e.g. 'a b foo \ud83d\ude38'

// Check input against validate function, if valid the accept button gets a class name of
// 'ui-keyboard-valid-input'. If invalid, the accept button gets a class name of
// 'ui-keyboard-invalid-input'
acceptValid: false,
// Auto-accept when input is valid; requires `acceptValid` set `true` & validate callback
autoAcceptOnValid: false,

// if acceptValid is true & the validate function returns a false, this option will cancel
// a keyboard close only after the accept button is pressed
cancelClose: true,

// tab to go to next, shift-tab for previous (default behavior)
tab: false,

// enter for next input; shift+enter accepts content & goes to next
// shift + 'enterMod' + enter ('enterMod' is the alt as set below) will accept content and go
// to previous in a textarea
enterNavigation: false,
// mod key options: 'ctrlKey', 'shiftKey', 'altKey', 'metaKey' (MAC only)
enterMod: 'altKey', // alt-enter to go to previous; shift-alt-enter to accept & go to previous

// if true, the next button will stop on the last keyboard input/textarea; prev button stops at first
// if false, the next button will wrap to target the first input/textarea; prev will go to the last
stopAtEnd: true,

// Set this to append the keyboard after the input/textarea (appended to the input/textarea parent).
// This option works best when the input container doesn't have a set width & when the 'tabNavigation'
// option is true.
appendLocally: false,
// When appendLocally is false, the keyboard will be appended to this object
appendTo: 'body',

// If false, the shift key will remain active until the next key is (mouse) clicked on; if true it will
// stay active until pressed again
stickyShift: true,

// Prevent pasting content into the area
preventPaste: false,

// caret placed at the end of any text when keyboard becomes visible
caretToEnd: false,

// caret stays this many pixels from the edge of the input while scrolling left/right;
// use "c" or "center" to center the caret while scrolling
scrollAdjustment: 10,

// Set the max number of characters allowed in the input, setting it to false disables this option
maxLength: false,
// allow inserting characters @ caret when maxLength is set
maxInsert: true,

// Mouse repeat delay - when clicking/touching a virtual keyboard key, after this delay the key will
// start repeating
repeatDelay: 500,

// Mouse repeat rate - after the repeatDelay, this is the rate (characters per second) at which the
// key is repeated Added to simulate holding down a real keyboard key and having it repeat. I haven't
// calculated the upper limit of this rate, but it is limited to how fast the javascript can process
// the keys. And for me, in Firefox, it's around 20.
repeatRate: 20,

// resets the keyboard to the default keyset when visible
resetDefault: true,

// Event (namespaced) on the input to reveal the keyboard. To disable it, just set it to ''.
openOn: 'focus',

// Event (namepaced) for when the character is added to the input (clicking on the keyboard)
keyBinding: 'mousedown touchstart',

// enable/disable mousewheel functionality
// enabling still depends on the mousewheel plugin
useWheel: true,

// combos (emulate dead keys : http://en.wikipedia.org/wiki/Keyboard_layout#US-International)
// if user inputs `a the script converts it to à, ^o becomes ô, etc.
useCombos: true,

/*
  // *** Methods ***
  // commenting these out to reduce the size of the minified version
  // Callbacks - attach a function to any of these callbacks as desired
  initialized   : function(e, keyboard, el) {},
  beforeVisible : function(e, keyboard, el) {},
  visible       : function(e, keyboard, el) {},
  change        : function(e, keyboard, el) {},
  beforeClose   : function(e, keyboard, el, accepted) {},
  accepted      : function(e, keyboard, el) {},
  canceled      : function(e, keyboard, el) {},
  restricted    : function(e, keyboard, el) {},
  hidden        : function(e, keyboard, el) {},
  // called instead of base.switchInput
  switchInput   : function(keyboard, goToNext, isAccepted) {},
  // used if you want to create a custom layout or modify the built-in keyboard
  create        : function(keyboard) { return keyboard.buildKeyboard(); },

  // build key callback
  buildKey : function( keyboard, data ) {
    / *
    data = {
    // READ ONLY
    isAction : [boolean] true if key is an action key
    name     : [string]  key class name suffix ( prefix = 'ui-keyboard-' );
                         may include decimal ascii value of character
    value    : [string]  text inserted (non-action keys)
    title    : [string]  title attribute of key
    action   : [string]  keyaction name
    html     : [string]  HTML of the key; it includes a <span> wrapping the text
    // use to modify key HTML
    $key     : [object]  jQuery selector of key which is already appended to keyboard
    }
    * /
    return data;
  },
*/

// this callback is called, if the acceptValid is true, and just before the 'beforeClose' to check
// the value if the value is valid, return true and the keyboard will continue as it should
// (close if not always open, etc). If the value is not valid, return false and clear the keyboard
// value ( like this "keyboard.$preview.val('');" ), if desired. The validate function is called after
// each input, the 'isClosing' value will be false; when the accept button is clicked,
// 'isClosing' is true
validate: function (keyboard, value, isClosing) {
  return true;
}

jQuery Virtual Keyboard Plugin, keyboard (OSK) plugin/Github

See Demo And Download