# Virtual Keyboard

##### Original by Jeremy Satterfield, updated & maintained by Rob Garrison

- ...
- ...
- ...
- ...
- ...

##### Click inside the input or textarea to open the keyboard
Click on the keyboard title, then scroll down to see its code

## QWERTY Text

* Placeholder (watermark).
* Autocomplete extension.

#### HTML

    <input id="text" type="text" placeholder=" Enter something...">

#### Script

    // Autocomplete demo
    var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure",
    	"COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript",
    	"Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ];

    $('#text')
    	.keyboard({ layout: 'qwerty' })
    	.autocomplete({
    		source: availableTags
    	})
    	// position options added after v1.23.4
    	.addAutocomplete({
    		position : {
    			of : null,        // when null, element will default to kb.$keyboard
    			my : 'right top', // 'center top', (position under keyboard)
    			at : 'left top',  // 'center bottom',
    			collision: 'flip'
    		}
    	})
    	.addTyping();

## QWERTY Password

* Click icon to open keyboard.
* Stay open until accept/cancel/esc.
* Key hover disabled in this type.
* Demo: Reveal letters with Caret extension.

#### HTML

    <img id="passwd" class="tooltip-tipsy" title="Click to open the virtual keyboard" src="css/images/keyboard.svg">
    <input id="password" type="password">

#### Script

    $('#password')
    	.keyboard({
    		openOn : null,
    		stayOpen : true,
    		layout : 'qwerty'
    	})
    	.addTyping();

    $('#password-opener').click(function(){
    	var kb = $('#password').getkeyboard();
    	// close the keyboard if the keyboard is visible and the button is clicked a second time
    	if ( kb.isOpen ) {
    		kb.close();
    	} else {
    		kb.reveal();
    	}
    });

## QWERTY (mod) Text Area

* Locked input (no manual input).
* Known readonly bug in Safari.
* Caret extension.

#### HTML

    <textarea id="qwerty-mod"></textarea>

#### Script

    $('#qwerty-mod')
    	.keyboard({
    		lockInput: true, // prevent manual keyboard entry
    		layout: 'custom',
    		customLayout: {
    			'normal': [
    				'` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
    				'{tab} q w e r t y u i o p [ ] \\',
    				'a s d f g h j k l ; \' {enter}',
    				'{shift} z x c v b n m , . / {shift}',
    				'{accept} {space} {left} {right}'
    			],
    			'shift': [
    				'~ ! @ # $ % ^ & * ( ) _ + {bksp}',
    				'{tab} Q W E R T Y U I O P { } |',
    				'A S D F G H J K L : " {enter}',
    				'{shift} Z X C V B N M < > ? {shift}',
    				'{accept} {space} {left} {right}'
    			]
    		}
    	})
    	.addCaret({
    		// extra class name added to the caret
    		// "ui-keyboard-caret" class is always added
    		caretClass : '',
    		// *** for future use ***
    		// data-attribute containing the character(s) next to the caret
    		charAttr   : 'data-character',
    		// # character(s) next to the caret (can be negative for RTL)
    		charIndex  : 1,
    		// caret position adjustments
    		offsetX    : 0,
    		offsetY    : 0
    	})
    	.addTyping();

#### CSS

    .ui-keyboard-caret {
    	background: #c00;
    	width: 1px;
    	margin-top: 3px;
    }

## International

* Bootswatch Darkly theme.
* Typing extension.
* See basic non-library theme.

#### HTML

    <img id="inter-type" class="tooltip-tipsy" title="Try out the typing extension!" src="css/images/keyboard.svg">
    <textarea id="inter"></textarea>

#### CSS

    /* override bootstrap active state */
    button.btn-default:active {
    	background-color: #FFF;
    	-webkit-box-shadow: none;
    	box-shadow: none;
    }
    button.btn-default:active:hover {
    	background-color: #3276B1;
    }
    /* override Bootstrap excessive button padding */
    button.ui-keyboard-button.btn {
    	padding: 1px 6px;
    }
    /* Bootswatch Darkly input is too bright */
    .ui-keyboard-input.light, .ui-keyboard-preview.light { color: #222; background: #ddd; }
    .ui-keyboard-input.dark, .ui-keyboard-preview.dark { color: #ddd; background: #222; }

#### Script

    $('#inter')
    	.keyboard({
    		layout: 'international',
    		css: {
    			// input & preview
    			// "label-default" for a darker background
    			// "light" for white text
    			input: 'form-control input-sm dark',
    			// keyboard container
    			container: 'center-block well',
    			// default state
    			buttonDefault: 'btn btn-default',
    			// hovered button
    			buttonHover: 'btn-primary',
    			// Action keys (e.g. Accept, Cancel, Tab, etc);
    			// this replaces "actionClass" option
    			buttonAction: 'active',
    			// used when disabling the decimal button {dec}
    			// when a decimal exists in the input area
    			buttonDisabled: 'disabled'
    		}
    	})
    	.addTyping();

    // Script - typing extension
    // simulate typing into the keyboard, use:
    // \t or {t} = tab, \b or {b} = backspace, \r or \n or {e} = enter
    // added {l} = caret left, {r} = caret right & {d} = delete
    $('#inter-type').click(function(){
    	$('#inter').getkeyboard().reveal().typeIn("{t}Hal{l}{l}{d}e{r}{r}l'o{b}o {e}{t}World", 500);
    	return false;
    });

## Alphabetical

#### HTML

    <textarea id="alpha"></textarea>

#### Script

    $('#alpha')
    	.keyboard({ layout: 'alpha' })
    	.addTyping();

## Colemak

#### HTML

    <textarea id="colemak"></textarea>

#### Script

    $('#colemak')
    	.keyboard({ layout: 'colemak' })
    	.addTyping();

## Dvorak

#### HTML

    <textarea id="dvorak"></textarea>

#### Script

    $('#dvorak')
    	.keyboard({ layout: 'dvorak' })
    	.addTyping();

## Num Pad

* Input restricted.
* Pasting (ctrl-v) not allowed.
* Auto accept content.

#### HTML

    <input id="num" class="alignRight" type="text">

#### Script

    $('#num')
    	.keyboard({
    		layout : 'num',
    		restrictInput : true, // Prevent keys not in the displayed keyboard from being typed in
    		preventPaste : true,  // prevent ctrl-v and right click
    		autoAccept : true
    	})
    	.addTyping();

## Custom: Hex

* maxLength = 6.
* Input restricted.
* Lowercase included.
* Valid @ length = 6.

#### HTML

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

#### Script

    $('#hex')
    	.keyboard({
    		layout: 'custom',
    		customLayout: {
    			'default' : [
    				'C D E F',
    				'8 9 A B',
    				'4 5 6 7',
    				'0 1 2 3',
    				'{bksp} {a} {c}'
    			]
    		},
    		maxLength : 6,
    		// Prevent keys not in the displayed keyboard from being typed in
    		restrictInput : true,
    		// include lower case characters (added v1.25.7)
    		restrictInclude : 'a b c d e f',
    		// don't use combos or A+E could become a ligature
    		useCombos : false,
    		// activate the "validate" callback function
    		acceptValid : true,
    		validate : function(keyboard, value, isClosing){
    			// only make valid if input is 6 characters in length
    			return value.length === 6;
    		}
    	})
    	.addTyping();

## Custom: Meta Sets

* Typing extension.
* Keyboard opens showing last keyset.
* userClosed set (accept/cancel to close).

#### HTML

    <textarea id="meta"></textarea>

#### Script

    $('#meta')
    	.keyboard({
    		// keyboard will open showing last key set used
    		resetDefault: false,
    		userClosed: true, // keyboard open until user closes with accept or cancel
    		autoAccept: true, // required for userClosed: true
    		layout: 'custom',
    		display: {
    			'alt'    : 'AltGr:It\'s all Greek to me',
    			'meta1'  : '\u2666:end of alphabet', // Diamond with label that shows in the title (spaces are okay here)
    			'meta2'  : '\u2665:Russian',         // Heart
    			'meta3'  : '\u2663:zodiac',          // Club
    			'meta99' : '\u2660:numbers'          // Spade
    		},
    		customLayout: {
    			'default' : [
    				// Add labels using a ":" after the key's name and replace spaces with "_"
    				// without the labels this line is just 'a b c d e f g'
    				'a:a_letter,_that_sounds_like_"ey" b:a_bug_that_makes_honey c:is_when_I_look_around d:a_grade,_I_never_got e:is_what_girls_say_when_they_run_away_from_me f:u,_is_what_I_say_to_those_screaming_girls! g:gee,_is_that_the_end_of_my_wittiness?',
    				'{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
    				'{bksp} {sp:1} {accept} {cancel}'
    			],
    			'shift' : [
    				'A B C D E F G',
    				'{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
    				'{bksp} {sp:1} {accept} {cancel}'
    			],
    			'alt' : [
    				'\u03b1 \u03b2 \u03b3 \u03b4 \u03b5 \u03b6 \u03b7', // lower case Greek
    				'{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
    				'{bksp} {sp:1} {accept} {cancel}'
    			],
    			'alt-shift' : [
    				'\u0391 \u0392 \u0393 \u0394 \u0395 \u0396 \u0397', // upper case Greek
    				'{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
    				'{bksp} {sp:1} {accept} {cancel}'
    			],
    			'meta1' : [
    				't u v w x y z', // lower case end of alphabet
    				'{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
    				'{bksp} {sp:1} {accept} {cancel}'
    			],
    			'meta1-shift' : [
    				'T U V W X Y Z', // upper case
    				'{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
    				'{bksp} {sp:1} {accept} {cancel}'
    			],
    			'meta1-alt' : [
    				'0 9 8 7 6 5 4', // numbers
    				'{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
    				'{bksp} {sp:1} {accept} {cancel}'
    			],
    			'meta1-alt-shift' : [
    				') ( * & ^ % $', // shifted numbers
    				'{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
    				'{bksp} {sp:1} {accept} {cancel}'
    			],
    			'meta2' : [
    				'\u0430 \u0431 \u0432 \u0433 \u0434 \u0435 \u0436', // lower case Russian
    				'{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
    				'{bksp} {sp:1} {accept} {cancel}'
    			],
    			'meta2-shift' : [
    				'\u0410 \u0411 \u0412 \u0413 \u0414 \u0415 \u0416', // upper case Russian
    				'{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
    				'{bksp} {sp:1} {accept} {cancel}'
    			],
    			'meta3' : [
    				'\u2648 \u2649 \u264A \u264B \u264C \u264D \u264E', // Zodiac
    				'{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
    				'{bksp} {sp:1} {accept} {cancel}'
    			],
    			'meta99' : [
    				'1 2 3 4 5 6 7', // only because I ran out of ideas
    				'{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
    				'{bksp} {sp:1} {accept} {cancel}'
    			]
    		}
    	})
    	.addTyping();

    // Script - typing extension
    var meta = $('#meta').getkeyboard();
    meta
    	.reveal()
    	.typeIn('aBcD1112389\u2648\u2649', 700, function(){
    		meta.accept();
    		alert('all done!');
    	});

## Custom: Junk

* Use shift key - see action key sizes.
* Use the decimal - only one allowed.
* Toggle combo key included.
* Type in 'ae' and other combo keys.
* Accept content to see the callback.

#### HTML

    <textarea id="junk"></textarea>

#### Script

    $('#junk')
    	.keyboard({
    		layout: 'custom',
    		customLayout: {
    			'default' : [
    				'a e i o u y c',
    				'` \' " ~ {sp:1} {dec}',
    				'{tab} {enter} {bksp}',
    				'{space}',
    				'{accept} {cancel} {shift}'
    			],
    			'shift' : [
    				'A E I O U Y C',
    				'` \' " ~ {sp:1} {dec}',
    				'{t} {sp:1} {e} {sp:1} {b}',
    				'{space}',
    				'{a} {sp:1} {c} {sp:1} {s}'
    			]
    		},
    		// Added here as an example on how to add combos
    		combos : {
    			'a' : { e: '\u00e6' },
    			'A' : { E: '\u00c6' }
    		},
    		// example callback function
    		accepted : function(e, keyboard, el){ alert('The content "' + el.value + '" was accepted!'); }
    	})
    	.addTyping();

## Custom: Mapped Keys

* No preview window.
* Type in a-g.
* Type in A-G (shifted).

#### HTML

    <textarea id="map"></textarea>

#### Script

    // *** Mapped keys ***
    $('#map').keyboard({
    	layout: 'custom',
    	customLayout: {
    		'default' : [
    			// "n(a):title_or_tooltip"; n = new key, (a) = actual key, ":label" = title_or_tooltip (use an underscore "_" in place of a space " ")
    			'\u03b1(a):lower_case_alpha_(type_a) \u03b2(b):lower_case_beta_(type_b) \u03b3(c):lower_case_gamma_(type_c) \u03b4(d):lower_case_delta_(type_d) \u03b5(e):lower_case_epsilon_(type_e) \u03b6(f):lower_case_zeta_(type_f) \u03b7(g):lower_case_eta_(type_g)', // lower case Greek
    			'{shift} {accept} {cancel}'
    		],
    		'shift' : [
    			'\u0391(A) \u0392(B) \u0393(C) \u0394(D) \u0395(E) \u0396(F) \u0397(G)', // upper case Greek
    			'{shift} {accept} {cancel}'
    		]
    	},
    	usePreview: false // no preveiw
    });

## Custom: Hidden

Hidden input

#### HTML

    <a href="#" class="hiddenInput">Hidden input</a>
    <!-- DON'T use type="hidden" because IE doesn't like hidden inputs -->
    <input id="hidden" type="text" style="display:none;">

#### Script

    // *** Hidden input example ***
    // click on a link - add focus to hidden input
    $('.hiddenInput').click(function(){
    	$('#hidden').data('keyboard').reveal();
    	return false;
    });
    // Initialize keyboard script on hidden input
    // set "position.of" to the same link as above
    $('#hidden')
    	.keyboard({
    		layout   : 'qwerty',
    		position : {
    			of : $('.hiddenInput'),
    			my : 'center top',
    			at : 'center top'
    		}
    	})
    	.addTyping();

## Custom: iPad

* Thanks to gitaarik for sharing!.

#### HTML

    <textarea id="ipad"></textarea>

#### Script

    $('#ipad').keyboard({

    	display: {
    		'bksp'   :  "\u2190",
    		'accept' : 'return',
    		'default': 'ABC',
    		'meta1'  : '.?123',
    		'meta2'  : '#+='
    	},

    	layout: 'custom',
    	customLayout: {
    		'default': [
    			'q w e r t y u i o p {bksp}',
    			'a s d f g h j k l {enter}',
    			'{s} z x c v b n m , . {s}',
    			'{meta1} {space} {meta1} {accept}'
    		],
    		'shift': [
    			'Q W E R T Y U I O P {bksp}',
    			'A S D F G H J K L {enter}',
    			'{s} Z X C V B N M ! ? {s}',
    			'{meta1} {space} {meta1} {accept}'
    		],
    		'meta1': [
    			'1 2 3 4 5 6 7 8 9 0 {bksp}',
    			'- / : ; ( ) \u20ac & @ {enter}',
    			'{meta2} . , ? ! \' " {meta2}',
    			'{default} {space} {default} {accept}'
    		],
    		'meta2': [
    			'[ ] { } # % ^ * + = {bksp}',
    			'_ \\ | ~ < > $ \u00a3 \u00a5 {enter}',
    			'{meta1} . , ? ! \' " {meta1}',
    			'{default} {space} {default} {accept}'
    		]
    	}

    });

## Custom: iPad email

* Thanks to gitaarik for sharing!.

#### HTML

    <textarea id="ipad-email"></textarea>

#### Script

    $('#ipad-email').keyboard({

    	display: {
    		'bksp'   : '\u2190',
    		'enter'  : 'return',
    		'default': 'ABC',
    		'meta1'  : '.?123',
    		'meta2'  : '#+=',
    		'accept' : '\u21d3'
    	},

    	layout: 'custom',
    	customLayout: {
    		'default': [
    			'q w e r t y u i o p {bksp}',
    			'a s d f g h j k l {enter}',
    			'{s} z x c v b n m @ . {s}',
    			'{meta1} {space} _ - {accept}'
    		],
    		'shift': [
    			'Q W E R T Y U I O P {bksp}',
    			'A S D F G H J K L {enter}',
    			'{s} Z X C V B N M @ . {s}',
    			'{meta1} {space} _ - {accept}'
    		],
    		'meta1': [
    			'1 2 3 4 5 6 7 8 9 0 {bksp}',
    			'` | { } % ^ * / \' {enter}',
    			'{meta2} $ & ~ # = + . {meta2}',
    			'{default} {space} ! ? {accept}'
    		],
    		'meta2': [
    			'[ ] { } \u2039 \u203a ^ * " , {bksp}',
    			'\\ | / < > $ \u00a3 \u00a5 \u2022 {enter}',
    			'{meta1} \u20ac & ~ # = + . {meta1}',
    			'{default} {space} ! ? {accept}'
    		]
    	}

    });

## Custom: Lockable

* cursor arrow keys.
* keyboard enable/disable toggle.
* include {del} key (opposite of {bksp})

#### HTML

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

#### Script

    $('#lockable').keyboard({
    	layout: 'custom',
    	customLayout: {
    		'normal': [
    			'` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
    			'{tab} q w e r t y u i o p [ ] \\',
    			'a s d f g h j k l ; \' {enter}',
    			'{shift} z x c v b n m , . / {shift}',
    			'{accept} {space} {left} {right} {sp:.2} {del} {toggle}'
    		],
    		'shift': [
    			'~ ! @ # $ % ^ & * ( ) _ + {bksp}',
    			'{tab} Q W E R T Y U I O P { } |',
    			'A S D F G H J K L : " {enter}',
    			'{shift} Z X C V B N M < > ? {shift}',
    			'{accept} {space} {left} {right} {sp:.2} {del} {toggle}'
    		]
    	},
    	css: {
    		// add dark themed class to keyboard popup
    		// to use bright svg padlock icon
    		popup : 'ui-keyboard-dark-theme'
    	}
    })
    .addTyping();