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](http://snipplr.com/view/21578/virtual-keyboard-widget--additional-css/).

Usage:

$('input[type=text], input[type=password], textarea')
.keyboard({
layout:"qwerty",
customLayout:
[["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}"]]
});

Options:

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](http://creativecommons.org/licenses/by-sa/3.0/)

URL: http://github.com/Mottie/Keyboard

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.