Virtual Keyboard Widget

/ Published in: jQuery
Save to your folder(s)

**This code is no longer under development. Please use the branch at the URL listed above.**

An on-screen virtual keyboard embedded within the browser window which will popup when a specified input field is focused. The user can then
type and preview their input before Accepting or Canceling.

Include additional css available [here](


$('input[type=text], input[type=password], textarea')
[["q w e r t y {bksp}","Q W E R T Y {bksp}"],
["s a m p l e {shift}","S A M P L E {shift}"],
["{accept} {space} {cancel}","{accept} {space} {cancel}"]]


layout - [String] specify which keyboard layout to use

* qwerty - Standard QWERTY layout (Default)

* alpha - Alphabetical layout

* dvorak - Dvorak Simplified layout

* num - Numerical (ten-key) layout

* custom - Uses a custom layout as defined by the customLayout option

customLayout - [Array] Specify a customer layout

* An Array of arrays

* Each internal array is a new keyboard row

* Each internal array can contain either one or two

* String elements (Lower case and Upper case respectively)

* Each string element must have each character or key seperated by a space

* Special/"Action" keys include:

* {space} - Spacebar
* {bksp} - Backspace
* {shift} - Shift/Capslock
* {return} - Return/New Line
* {accept} - Updates element value and closes keyboard
* {cancel} - Clears changes and closes keyboard
* {dec} - Decimal for numeric entry, only allows one decimal
* {neg} - Negative for numeric entry
* {sp:#} - Replace # with a numerical value, adds blank space, value of 1 ~ width of one key
[Creative Commons Attribution-Share Alike 3.0 Unported License](


Report this snippet


RSS Icon Subscribe to comments

You need to login to post a comment.