Permalink
Fetching contributors…
Cannot retrieve contributors at this time
891 lines (843 sloc) 28.4 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Virtual Keyboard</title>
<!-- jQuery (required) & jQuery UI + theme (optional) -->
<link href="docs/css/jquery-ui.min.css" rel="stylesheet">
<!-- still using jQuery v2.2.4 because Bootstrap doesn't support v3+ -->
<script src="docs/js/jquery-latest.min.js"></script>
<script src="docs/js/jquery-ui.min.js"></script>
<!-- <script src="docs/js/jquery-migrate-3.0.0.min.js"></script> -->
<!-- keyboard widget css & script (required) -->
<link href="css/keyboard.css" rel="stylesheet">
<script src="js/jquery.keyboard.js"></script>
<!-- keyboard extensions (optional) -->
<script src="js/jquery.mousewheel.js"></script>
<script src="js/jquery.keyboard.extension-typing.js"></script>
<script src="js/jquery.keyboard.extension-autocomplete.js"></script>
<script src="js/jquery.keyboard.extension-caret.js"></script>
<!-- demo only -->
<link rel="stylesheet" href="docs/css/bootstrap.min.css">
<link rel="stylesheet" href="docs/css/font-awesome.min.css">
<link href="docs/css/demo.css" rel="stylesheet">
<link href="docs/css/tipsy.css" rel="stylesheet">
<link href="docs/css/prettify.css" rel="stylesheet">
<script src="docs/js/bootstrap.min.js"></script>
<script src="docs/js/demo.js"></script>
<script src="docs/js/jquery.tipsy.min.js"></script>
<script src="docs/js/prettify.js"></script> <!-- syntax highlighting -->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" name="top">
<span class="fa fa-keyboard-o fa-lg"></span>
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
<li><a href="docs/basic.html">Basic</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Layouts <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="docs/layouts.html">Standard</a></li>
<li><a href="docs/layouts2.html">Greywyvern</a></li>
<li><a href="docs/layouts3.html">Microsoft Keyboard</a></li>
<li><a href="docs/calculator.html"><span class="fa fa-calculator fa-lg"></span> Calculator</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Extensions <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="docs/altkeys-popup.html">Alt-keys</a></li>
<li><a href="#autocomplete">Autocomplete</a></li>
<li><a href="#caret">Caret</a></li>
<li><a href="docs/extender.html">Extender</a></li>
<li><a href="docs/preview-keyset.html">Keyset</a></li>
<li><a href="docs/mobile.html">Mobile</a></li>
<li><a href="docs/jquery-mobile-1.4.html">Mobile v1.4</a></li>
<li><a href="docs/navigate.html">Navigate</a></li>
<li><a href="docs/scramble.html">Scramble</a></li>
<li><a href="#typing">Typing</a></li>
</ul>
</li>
<li><a href="https://jsfiddle.net/Mottie/egb3a1sk/"><span class="fa fa-flask fa-lg"></span> Playground</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="https://github.com/Mottie/Keyboard"><span class="fa fa-github fa-lg" title="GitHub"></span></a></li>
<li><a href="https://github.com/Mottie/Keyboard/archive/master.zip"><span class="fa fa-download fa-lg" title="Download"></span></a></li>
<li><a href="https://github.com/Mottie/Keyboard/wiki"><span class="fa fa-file-text-o fa-lg" title="Documentation"></span></a></li>
<li><a href="https://github.com/Mottie/Keyboard/issues"><span class="fa fa-bug fa-lg" title="Issues"></span></a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div id="page-wrap">
<h1>
<a href="https://github.com/Mottie/Keyboard">Virtual Keyboard</a><br>
<small class="version"></small>
</h1>
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=Mottie&amp;repo=keyboard&amp;type=fork&amp;count=true" width="90" height="20" title="Fork on GitHub"></iframe>
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=Mottie&amp;repo=keyboard&amp;type=watch&amp;count=true" width="100" height="20" title="Star on GitHub"></iframe>
<h5>Original by
<a class="external" href="https://jsatt.blogspot.com/2010/01/on-screen-keyboard-widget-using-jquery.html">Jeremy Satterfield</a>,
updated &amp; maintained by <a class="external" href="https://wowmotty.blogspot.com/2010/11/jquery-ui-keyboard-widget.html">Rob Garrison</a>
</h5>
<ul id="console">
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
<h5>
Click inside the input or textarea to open the keyboard<br>
Click on the keyboard title, then scroll down to see its code
</h5>
<div class="block">
<h2>
<span class="tooltip-tipsy" title="Click, then scroll down to see this code">Custom: Contenteditable</span>
</h2>
<div id="contenteditable" contenteditable="true">This
is a <em>content editable</em> div with a custom keyboard
<strong>layout</strong>. Press <kbd>Enter</kbd> to add new lines.</div>
<br>
<small>
* Contenteditable support (v1.27.0-beta).<br>
* <code>usePreview</code> disabled.<br>
* Custom layout used.
</small>
<div class="code ui-corner-all">
<h4>HTML</h4>
<pre class="prettyprint lang-html">&lt;div id="contenteditable" contenteditable="true"&gt;This
is a &lt;em&gt;content editable&lt;/em&gt; div with a custom keyboard
&lt;strong&gt;layout&lt;/strong&gt;. Press &lt;kbd&gt;Enter&lt;/kbd&gt; to add new lines.&lt;/div&gt;</pre>
<h4>Script</h4>
<pre class="prettyprint lang-js">$.keyboard.keyaction.undo = function (base) {
base.execCommand('undo');
return false;
};
$.keyboard.keyaction.redo = function (base) {
base.execCommand('redo');
return false;
};
$('#contenteditable').keyboard({
usePreview: true, // disabled for contenteditable
useCombos: false,
autoAccept: true,
layout: 'custom',
customLayout: {
'normal': [
'` 1 2 3 4 5 6 7 8 9 0 - = {del} {b}',
'{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} {undo:Undo} {redo:Redo}'
],
'shift': [
'~ ! @ # $ % ^ & * ( ) _ + {del} {b}',
'{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} {undo:Undo} {redo:Redo}'
]
},
display: {
del: '\u2326:Delete',
redo: '↻',
undo: '↺'
}
})
.addTyping();</pre>
</div>
</div>
<div class="block" id="autocomplete">
<h2>
<span class="tooltip-tipsy" title="Click, then scroll down to see this code">QWERTY Text</span>
</h2>
<input id="text" type="text" placeholder=" Enter something...">
<br>
<small>
* Placeholder (watermark).<br>
* <a href="https://github.com/Mottie/Keyboard/wiki/Extension-Autocomplete">Autocomplete</a> extension.
</small>
<div class="code ui-corner-all">
<h4>HTML</h4>
<pre class="prettyprint lang-html">&lt;input id="text" type="text" placeholder=" Enter something..."&gt;</pre>
<h4>Script</h4>
<pre class="prettyprint lang-js">// 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();</pre>
</div>
</div>
<div class="block">
<h2>
<span class="tooltip-tipsy" title="Click, then scroll down to see this code">QWERTY Password</span>
<img id="password-opener" class="tooltip-tipsy" title="Click to open the virtual keyboard" src="css/images/keyboard.svg">
</h2>
<input id="password" type="password">
<br>
<small>
* Click icon to open keyboard.<br>
* Stay open until accept/cancel/esc.<br>
* Key hover disabled in this type.<br>
* Demo: Reveal letters with <a class="external" href="https://jsfiddle.net/Mottie/24n8wsak/">Caret extension</a>.
</small>
<div class="code ui-corner-all">
<h4>HTML</h4>
<pre class="prettyprint lang-html">&lt;img id="passwd" class="tooltip-tipsy" title="Click to open the virtual keyboard" src="css/images/keyboard.svg"&gt;
&lt;input id="password" type="password"&gt;</pre>
<h4>Script</h4>
<pre class="prettyprint lang-js">$('#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();
}
});</pre>
</div>
</div>
<div class="block" id="caret">
<h2>
<span class="tooltip-tipsy" title="Click, then scroll down to see this code">QWERTY (mod) Text Area</span>
</h2>
<textarea id="qwerty-mod"></textarea>
<br>
<small>
* Locked input (no manual input).<br>
* Known readonly bug in Safari.<br>
* <a href="https://github.com/Mottie/Keyboard/wiki/Extension-Caret">Caret</a> extension.
</small>
<div class="code ui-corner-all">
<h4>HTML</h4>
<pre class="prettyprint lang-html">&lt;textarea id="qwerty-mod"&gt;&lt;/textarea&gt;</pre>
<h4>Script</h4>
<pre class="prettyprint lang-js">$('#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 &lt; &gt; ? {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();</pre>
<h4>CSS</h4>
<pre class="prettyprint lang-css">.ui-keyboard-caret {
background: #c00;
width: 1px;
margin-top: 3px;
}</pre>
</div>
</div>
<div class="block" id="typing">
<h2>
<span class="tooltip-tipsy" title="Click, then scroll down to see this code">International</span>
<img id="inter-type" class="tooltip-tipsy" title="Try out the typing extension!" src="css/images/keyboard.svg">
</h2>
<textarea id="inter"></textarea>
<br>
<small>
* <a class="external" href="https://bootswatch.com/darkly/">Bootswatch Darkly</a> theme.<br>
* <a href="https://github.com/Mottie/Keyboard/wiki/Extension-Typing">Typing</a> extension.<br>
* See basic non-library <a class="external" href="https://jsfiddle.net/Mottie/jsh0377k/">theme</a>.
</small>
<div class="code ui-corner-all">
<h4>HTML</h4>
<pre class="prettyprint lang-html">&lt;img id="inter-type" class="tooltip-tipsy" title="Try out the typing extension!" src="css/images/keyboard.svg"&gt;
&lt;textarea id="inter"&gt;&lt;/textarea&gt;</pre>
<h4>CSS</h4>
<pre class="prettyprint lang-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; }
</pre>
<h4>Script</h4>
<pre class="prettyprint lang-js">$('#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;
});</pre>
</div>
</div>
<div class="block">
<h2>
<span class="tooltip-tipsy" title="Click, then scroll down to see this code">Alphabetical</span>
</h2>
<textarea id="alpha"></textarea>
<div class="code ui-corner-all">
<h4>HTML</h4>
<pre class="prettyprint lang-html">&lt;textarea id="alpha"&gt;&lt;/textarea&gt;</pre>
<h4>Script</h4>
<pre class="prettyprint lang-js">$('#alpha')
.keyboard({ layout: 'alpha' })
.addTyping();</pre>
</div>
</div>
<div class="block">
<h2>
<span class="tooltip-tipsy" title="Click, then scroll down to see this code">Colemak</span>
</h2>
<textarea id="colemak"></textarea>
<div class="code ui-corner-all">
<h4>HTML</h4>
<pre class="prettyprint lang-html">&lt;textarea id="colemak"&gt;&lt;/textarea&gt;</pre>
<h4>Script</h4>
<pre class="prettyprint lang-js">$('#colemak')
.keyboard({ layout: 'colemak' })
.addTyping();</pre>
</div>
</div>
<div class="block">
<h2>
<span class="tooltip-tipsy" title="Click, then scroll down to see this code">Dvorak</span>
</h2>
<textarea id="dvorak"></textarea>
<div class="code ui-corner-all">
<h4>HTML</h4>
<pre class="prettyprint lang-html">&lt;textarea id="dvorak"&gt;&lt;/textarea&gt;</pre>
<h4>Script</h4>
<pre class="prettyprint lang-js">$('#dvorak')
.keyboard({ layout: 'dvorak' })
.addTyping();</pre>
</div>
</div>
<div class="block">
<h2>
<span class="tooltip-tipsy" title="Click, then scroll down to see this code">Num Pad</span>
</h2>
<input id="num" class="alignRight" type="text">
<br>
<small>
* Input restricted.<br>
* Pasting (ctrl-v) not allowed.<br>
* Auto accept content.
</small>
<div class="code ui-corner-all">
<h4>HTML</h4>
<pre class="prettyprint lang-html">&lt;input id="num" class="alignRight" type="text"&gt;</pre>
<h4>Script</h4>
<pre class="prettyprint lang-js">$('#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();</pre>
</div>
</div>
<div class="block">
<h2>
<span class="tooltip-tipsy" title="Click, then scroll down to see this code">Custom: Hex</span>
</h2>
<input id="hex" type="text">
<br>
<small>
* maxLength = 6.<br>
* Input restricted.<br>
* Lowercase included.<br>
* Valid @ length = 6.
</small>
<div class="code ui-corner-all">
<h4>HTML</h4>
<pre class="prettyprint lang-html">
&lt;input id="hex" type="text"&gt;</pre>
<h4>Script</h4>
<pre class="prettyprint lang-js">$('#hex')
.keyboard({
layout: 'custom',
customLayout: {
'normal' : [
'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();</pre>
</div>
</div>
<div class="block">
<h2>
<span class="tooltip-tipsy" title="Click, then scroll down to see this code">Custom: Meta Sets</span>
<img id="meta-type" class="tooltip-tipsy" title="Try out the typing extension!" src="css/images/keyboard.svg">
</h2>
<textarea id="meta"></textarea>
<br>
<small>
* <a href="https://github.com/Mottie/Keyboard/wiki/Extension-Typing">Typing</a> extension.<br>
* Keyboard opens showing last keyset.<br>
* userClosed set (accept/cancel to close).
</small>
<div class="code ui-corner-all">
<h4>HTML</h4>
<pre class="prettyprint lang-html">&lt;textarea id="meta"&gt;&lt;/textarea&gt;</pre>
<h4>Script</h4>
<pre class="prettyprint lang-js">$('#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',
// in v1.26.8, meta keys can be named `meta` followed by any letter, underscore or dash.
// older versions would only allow the name `meta` followed by a number, then any letter or underscore
// see https://github.com/Mottie/Keyboard/issues/504
'meta1' : '\u2666:end of alphabet', // Diamond with label that shows in the title (spaces are okay here)
'meta-2' : '\u2665:Russian', // Heart
'meta3' : '\u2663:zodiac', // Club
'meta_9' : '\u2660:numbers' // Spade
},
customLayout: {
'normal' : [
// 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} {meta-2} {meta3} {meta_9}',
'{bksp} {sp:1} {accept} {cancel}'
],
'shift' : [
'A B C D E F G',
'{shift} {alt} {meta1} {meta-2} {meta3} {meta_9}',
'{bksp} {sp:1} {accept} {cancel}'
],
'alt' : [
'\u03b1 \u03b2 \u03b3 \u03b4 \u03b5 \u03b6 \u03b7', // lower case Greek
'{shift} {alt} {meta1} {meta-2} {meta3} {meta_9}',
'{bksp} {sp:1} {accept} {cancel}'
],
'alt-shift' : [
'\u0391 \u0392 \u0393 \u0394 \u0395 \u0396 \u0397', // upper case Greek
'{shift} {alt} {meta1} {meta-2} {meta3} {meta_9}',
'{bksp} {sp:1} {accept} {cancel}'
],
'meta1' : [
't u v w x y z', // lower case end of alphabet
'{shift} {alt} {meta1} {meta-2} {meta3} {meta_9}',
'{bksp} {sp:1} {accept} {cancel}'
],
'meta1-shift' : [
'T U V W X Y Z', // upper case
'{shift} {alt} {meta1} {meta-2} {meta3} {meta_9}',
'{bksp} {sp:1} {accept} {cancel}'
],
'meta1-alt' : [
'0 9 8 7 6 5 4', // numbers
'{shift} {alt} {meta1} {meta-2} {meta3} {meta_9}',
'{bksp} {sp:1} {accept} {cancel}'
],
'meta1-alt-shift' : [
') ( * & ^ % $', // shifted numbers
'{shift} {alt} {meta1} {meta-2} {meta3} {meta_9}',
'{bksp} {sp:1} {accept} {cancel}'
],
'meta-2' : [
'\u0430 \u0431 \u0432 \u0433 \u0434 \u0435 \u0436', // lower case Russian
'{shift} {alt} {meta1} {meta-2} {meta3} {meta_9}',
'{bksp} {sp:1} {accept} {cancel}'
],
'meta-2-shift' : [
'\u0410 \u0411 \u0412 \u0413 \u0414 \u0415 \u0416', // upper case Russian
'{shift} {alt} {meta1} {meta-2} {meta3} {meta_9}',
'{bksp} {sp:1} {accept} {cancel}'
],
'meta3' : [
'\u2648 \u2649 \u264A \u264B \u264C \u264D \u264E', // Zodiac
'{shift} {alt} {meta1} {meta-2} {meta3} {meta_9}',
'{bksp} {sp:1} {accept} {cancel}'
],
'meta_9' : [
'1 2 3 4 5 6 7', // only because I ran out of ideas
'{shift} {alt} {meta1} {meta-2} {meta3} {meta_9}',
'{bksp} {sp:1} {accept} {cancel}'
]
}
})
.addTyping();
// Script - typing extension
var meta = $('#meta').getkeyboard();
meta
.reveal()
.typeIn('aBcD1112389\u0411\u2648\u2649', 700, function(){
meta.accept();
alert('all done!');
});</pre>
</div>
</div>
<div class="block">
<h2>
<span class="tooltip-tipsy" title="Click, then scroll down to see this code">Custom: Junk</span>
</h2>
<textarea id="junk"></textarea>
<br>
<small>
* Use shift key - see action key sizes.<br>
* Use the decimal - only one allowed.<br>
* Toggle combo key included.<br>
* Type in 'ae' and other combo keys.<br>
* Accept content to see the callback.
</small>
<div class="code ui-corner-all">
<h4>HTML</h4>
<pre class="prettyprint lang-html">&lt;textarea id="junk"&gt;&lt;/textarea&gt;</pre>
<h4>Script</h4>
<pre class="prettyprint lang-js">$('#junk')
.keyboard({
layout: 'custom',
customLayout: {
'normal' : [
'a e i o u y c',
'` \' " ~ ^ {dec} {combo}',
'{tab} {enter} {bksp}',
'{space}',
'{accept} {cancel} {shift}'
],
'shift' : [
'A E I O U Y C',
'` \' " ~ ^ {dec} {combo}',
'{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();</pre>
</div>
</div>
<div class="block">
<h2>
<span class="tooltip-tipsy" title="Click, then scroll down to see this code">Custom: Mapped Keys</span>
</h2>
<textarea id="map"></textarea>
<br>
<small>
* No preview window.<br>
* Type in a-g.<br>
* Type in A-G (shifted).<br>
</small>
<div class="code ui-corner-all">
<h4>HTML</h4>
<pre class="prettyprint lang-html">&lt;textarea id="map"&gt;&lt;/textarea&gt;</pre>
<h4>Script</h4>
<pre class="prettyprint lang-js">// *** Mapped keys ***
$('#map').keyboard({
layout: 'custom',
customLayout: {
'normal' : [
// "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
});</pre>
</div>
</div>
<div class="block">
<h2>
<span class="tooltip-tipsy" title="Click, then scroll down to see this code">Custom: Hidden</span>
</h2>
<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;">
<div class="code ui-corner-all">
<h4>HTML</h4>
<pre class="prettyprint lang-html">&lt;a href="#" class="hiddenInput"&gt;Hidden input&lt;/a&gt;
&lt;!-- DON'T use type="hidden" because IE doesn't like hidden inputs --&gt;
&lt;input id="hidden" type="text" style="display:none;"&gt;</pre>
<h4>Script</h4>
<pre class="prettyprint lang-js">// *** 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();</pre>
</div>
</div>
<div class="block">
<h2>
<span class="tooltip-tipsy" title="Click, then scroll down to see this code">Custom: iPad</span>
</h2>
<textarea id="ipad"></textarea>
<br>
<small>
* Thanks to <a class="external" href="https://github.com/gitaarik">gitaarik</a> for sharing!.
</small>
<div class="code ui-corner-all">
<h4>HTML</h4>
<pre class="prettyprint lang-html">&lt;textarea id="ipad"&gt;&lt;/textarea&gt;</pre>
<h4>Script</h4>
<pre class="prettyprint lang-js">$('#ipad').keyboard({
display: {
'bksp' : "\u2190",
'accept' : 'return',
'normal' : 'ABC',
'meta1' : '.?123',
'meta2' : '#+='
},
layout: 'custom',
customLayout: {
'normal': [
'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}',
'{normal} {space} {normal} {accept}'
],
'meta2': [
'[ ] { } # % ^ * + = {bksp}',
'_ \\ | ~ &lt; &gt; $ \u00a3 \u00a5 {enter}',
'{meta1} . , ? ! \' " {meta1}',
'{normal} {space} {normal} {accept}'
]
}
});</pre>
</div>
</div>
<div class="block">
<h2>
<span class="tooltip-tipsy" title="Click, then scroll down to see this code">Custom: iPad email</span>
</h2>
<textarea id="ipad-email"></textarea>
<br>
<small>
* Thanks to <a class="external" href="https://github.com/gitaarik">gitaarik</a> for sharing!.
</small>
<div class="code ui-corner-all">
<h4>HTML</h4>
<pre class="prettyprint lang-html">&lt;textarea id="ipad-email"&gt;&lt;/textarea&gt;</pre>
<h4>Script</h4>
<pre class="prettyprint lang-js">$('#ipad-email').keyboard({
display: {
'bksp' : '\u2190',
'enter' : 'return',
'normal' : 'ABC',
'meta1' : '.?123',
'meta2' : '#+=',
'accept' : '\u21d3'
},
layout: 'custom',
customLayout: {
'normal': [
'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}',
'{normal} {space} ! ? {accept}'
],
'meta2': [
'[ ] { } \u2039 \u203a ^ * " , {bksp}',
'\\ | / &lt; &gt; $ \u00a3 \u00a5 \u2022 {enter}',
'{meta1} \u20ac & ~ # = + . {meta1}',
'{normal} {space} ! ? {accept}'
]
}
});</pre>
</div>
</div>
<div class="block">
<h2>
<span class="tooltip-tipsy" title="Click, then scroll down to see this code">Custom: Lockable</span>
</h2>
<input id="lockable" type="text">
<br>
<small>
* cursor arrow keys.<br>
* keyboard enable/disable toggle.<br>
* include {del} key (opposite of {bksp})
</small>
<div class="code ui-corner-all">
<h4>HTML</h4>
<pre class="prettyprint lang-html">&lt;input id="lockable" type="text"&gt;</pre>
<h4>Script</h4>
<pre class="prettyprint lang-js">$('#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 &lt; &gt; ? {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();</pre>
</div>
</div>
<div id="showcode"></div>
<div id="footer"></div>
</div>
</body></html>