Virtual Keyboard using jQuery Plugin

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();

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();
	}
});

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;
}