Permalink
Fetching contributors…
Cannot retrieve contributors at this time
482 lines (439 sloc) 15.4 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Virtual Keyboard</title>
<!-- jQuery & jQuery UI + theme (required) -->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-darkness/jquery-ui.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.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>
<!-- demo only -->
<link href="demo/demo.css" rel="stylesheet">
<script src="demo/demo.js"></script>
<script src="http://mottie.github.com/Jatt/js/jquery.jatt.min.js"></script> <!-- tooltips -->
<!-- theme switcher -->
<script src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
</head>
<body>
<div id="page-wrap">
<!-- Links to other demo pages & docs -->
<div id="nav">
<a class="current" href="index.html">Main Demo</a>
<a href="basic.html">Basic</a>
<a href="mobile.html">Mobile</a>
<a href="layouts.html">Layouts</a>
<a href="navigate.html">Navigate</a>
<a href="calculator.html">Calculator</a>
<a class="play" href="http://jsfiddle.net/Mottie/MK947/">Playground</a>
<a class="git" href="https://github.com/Mottie/Keyboard/wiki">Documentation</a>
<a class="git" href="http://github.com/Mottie/Keyboard/downloads">Download</a>
<a class="issue" href="https://github.com/Mottie/Keyboard/issues">Issues</a><br><br>
</div>
<!-- End Links -->
<h1><a href="https://github.com/Mottie/Keyboard">Virtual Keyboard</a></h1>
<h4>Original by
<a href="http://jsatt.blogspot.com/2010/01/on-screen-keyboard-widget-using-jquery.html">Jeremy Satterfield</a>,
updated &amp; maintained by <a href="http://wowmotty.blogspot.com/2010/11/jquery-ui-keyboard-widget.html">Rob Garrison</a>
</h4>
<div id="switcher"></div>
<ul id="console">
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
<h3>Click on the keyboard title, then scroll down to see its code</h3>
<div class="block">
<h2><span class="tooltip" title="Click to see code">QWERTY Text</span></h2>
<input class="qwerty" type="text" placeholder="Enter something...">
<br>
<small>
* Placeholder (watermark).<br>
* Autocomplete.
</small>
<div class="code ui-corner-all" style="width: 585px; height: 365px;">
<pre><code><span class="ct">HTML
=======</span>
&lt;input class="qwerty" type="text" placeholder="Enter something..."&gt;
<span class="ct">Script
=======</span>
<span class="comment">// Autocomplete demo</span>
var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure",
"COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript",
"Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ];
$('.qwerty:eq(0)')
.keyboard({ layout: 'qwerty' })
.autocomplete({
source: availableTags
})
.addAutocomplete()
.addTyping();</code></pre>
</div>
</div>
<div class="block">
<h2><span class="tooltip" title="Click to see code">QWERTY Password</span> <img id="passwd" class="tooltip" title="Click to open the virtual keyboard" src="demo/keyboard.png"></h2>
<input class="qwerty" type="password">
<div class="code ui-corner-all" style="width: 350px; height: 200px;">
<pre><code><span class="ct">HTML
=======</span>
&lt;input class="qwerty" type="password"&gt;
<span class="ct">Script
=======</span>
$('.qwerty:eq(1)')
.keyboard({
openOn : null,
stayOpen : true,
layout : 'qwerty'
})
.addTyping();
$('#passwd').click(function(){
$('.qwerty:eq(1)').getkeyboard().reveal();
});</code></pre>
</div>
<br>
<small>
* Click icon to open keyboard.<br>
* Stay open until accept/cancel.<br>
* Key hover disabled in this type.
</small>
</div>
<div class="block">
<h2><span class="tooltip" title="Click to see code">QWERTY Text Area</span></h2>
<textarea class="qwerty"></textarea>
<br>
<small>
* Locked input (no manual input).<br>
* Position the hidden caret!<br>
* Known readonly bug in Safari.
</small>
<div class="code ui-corner-all" style="width: 350px; height: 200px;">
<pre><code><span class="ct">HTML
=======</span>
&lt;textarea class="qwerty"&gt;&lt;/textarea&gt;
<span class="ct">Script
=======</span>
$('.qwerty:eq(2)')
.keyboard({
layout : 'qwerty',
lockInput: true <span class="comment">// prevent manual keyboard entry</span>
})
.addTyping();</code></pre>
</div>
</div>
<div class="block">
<h2><span class="tooltip" title="Click to see code">International</span> <img id="inter-type" class="tooltip" title="Try out the typing extension!" src="demo/keyboard.png"></h2>
<textarea id="inter"></textarea>
<div class="code ui-corner-all" style="width: 350px; height: 200px;">
<pre><code><span class="ct">HTML
=======</span>
&lt;textarea id="inter"&gt;&lt;/textarea&gt;
<span class="ct">Script
=======</span>
$('#inter')
.keyboard({ layout: 'international' })
.addTyping();
<span class="ct">Script - typing extension
=======</span>
$('#inter').getkeyboard().reveal().typeIn('\tHello \b\n\tWorld', 500);</code></pre>
</div>
</div>
<div class="block">
<h2><span class="tooltip" title="Click to see code">Alphabetical</span></h2>
<textarea id="alpha"></textarea>
<div class="code ui-corner-all" style="width: 350px; height: 200px;">
<pre><code><span class="ct">HTML
=======</span>
&lt;textarea id="alpha"&gt;&lt;/textarea&gt;
<span class="ct">Script
=======</span>
$('#alpha')
.keyboard({ layout: 'alpha' })
.addTyping();</code></pre>
</div>
</div>
<div class="block">
<h2><span class="tooltip" title="Click to see code">Dvorak</span></h2>
<textarea id="dvorak"></textarea>
<div class="code ui-corner-all" style="width: 350px; height: 200px;">
<pre><code><span class="ct">HTML
=======</span>
&lt;textarea id="dvorak"&gt;&lt;/textarea&gt;
<span class="ct">Script
=======</span>
$('#dvorak')
.keyboard({ layout: 'dvorak' })
.addTyping();</code></pre>
</div>
</div>
<div class="block">
<h2><span class="tooltip" title="Click to see code">Num Pad</span></h2>
<input id="num" class="alignRight" type="text">
<div class="code ui-corner-all" style="width: 745px; height: 285px;">
<pre><code><span class="ct">HTML
=======</span>
&lt;input id="num" class="alignRight" type="text"&gt;
<span class="ct">Script
=======</span>
$('#num')
.keyboard({
layout : 'num',
restrictInput : true, <span class="comment">// Prevent keys not in the displayed keyboard from being typed in</span>
preventPaste : true, <span class="comment">// prevent ctrl-v and right click</span>
autoAccept : true
})
.addTyping();</code></pre>
</div>
<br>
<small>
* Input restricted.<br>
* Pasting (ctrl-v) not allowed.<br>
* Auto accept content.
</small>
</div>
<div class="block">
<h2><span class="tooltip" title="Click to see code">Custom: Hex</span></h2>
<input id="hex" type="text">
<div class="code ui-corner-all" style="width: 740px; height: 420px;">
<pre><code><span class="ct">HTML
=======</span>
&lt;input id="hex" type="text"&gt;
<span class="ct">Script
=======</span>
$('#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,
restrictInput : true, <span class="comment">// Prevent keys not in the displayed keyboard from being typed in</span>
useCombos : false <span class="comment">// don't want A+E to become a ligature</span>
})
.addTyping();</code></pre>
</div>
<br>
<small>
* maxLength = 6.<br>
* Input restricted.
</small>
</div>
<div class="block">
<h2><span class="tooltip" title="Click to see code">Custom: Meta Sets</span> <img id="meta-type" class="tooltip" title="Try out the typing extension!" src="demo/keyboard.png"></h2>
<textarea id="meta"></textarea>
<div class="code ui-corner-all" style="width: 740px; height: 420px;">
<pre><code><span class="ct">HTML
=======</span>
&lt;textarea id="meta"&gt;&lt;/textarea&gt;
<span class="ct">Script
=======</span>
$('#meta')
.keyboard({
layout: 'custom',
display: {
'alt' : 'AltGr:It\'s all Greek to me',
'meta1' : '\u2666:end of alphabet', <span class="comment">// Diamond with label that shows in the title (spaces are okay here)</span>
'meta2' : '\u2665:Russian', <span class="comment">// Heart</span>
'meta3' : '\u2663:zodiac', <span class="comment">// Club</span>
'meta99' : '\u2660:numbers' <span class="comment">// Spade</span>
},
customLayout: {
'default' : [
<span class="comment">// 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'</span>
'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', <span class="comment">// lower case Greek</span>
'{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
'{bksp} {sp:1} {accept} {cancel}'
],
'alt-shift' : [
'\u0391 \u0392 \u0393 \u0394 \u0395 \u0396 \u0397', <span class="comment">// upper case Greek</span>
'{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
'{bksp} {sp:1} {accept} {cancel}'
],
'meta1' : [
't u v w x y z', <span class="comment">// lower case end of alphabet</span>
'{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
'{bksp} {sp:1} {accept} {cancel}'
],
'meta1-shift' : [
'T U V W X Y Z', <span class="comment">// upper case</span>
'{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
'{bksp} {sp:1} {accept} {cancel}'
],
'meta1-alt' : [
'0 9 8 7 6 5 4', <span class="comment">// numbers</span>
'{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
'{bksp} {sp:1} {accept} {cancel}'
],
'meta1-alt-shift' : [
') ( * & ^ % $', <span class="comment">// shifted numbers</span>
'{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
'{bksp} {sp:1} {accept} {cancel}'
],
'meta2' : [
'\u0430 \u0431 \u0432 \u0433 \u0434 \u0435 \u0436', <span class="comment">// lower case Russian</span>
'{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
'{bksp} {sp:1} {accept} {cancel}'
],
'meta2-shift' : [
'\u0410 \u0411 \u0412 \u0413 \u0414 \u0415 \u0416', <span class="comment">// upper case Russian</span>
'{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
'{bksp} {sp:1} {accept} {cancel}'
],
'meta3' : [
'\u2648 \u2649 \u264A \u264B \u264C \u264D \u264E', <span class="comment">// Zodiac</span>
'{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
'{bksp} {sp:1} {accept} {cancel}'
],
'meta99' : [
'1 2 3 4 5 6 7', <span class="comment">// only because I ran out of ideas</span>
'{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
'{bksp} {sp:1} {accept} {cancel}'
]
}
})
.addTyping();
<span class="ct">Script - typing extension
=======</span>
var meta = $('#meta').getkeyboard();
meta.reveal().typeIn('aBcD1112389\u2648\u2649', 700, function(){ meta.accept(); alert('all done!'); });</code></pre>
</div>
</div>
<div class="block">
<h2><span class="tooltip" title="Click to see code">Custom: Junk</span></h2>
<textarea id="junk"></textarea>
<div class="code ui-corner-all" style="width: 745px; height: 285px;">
<pre><code><span class="ct">HTML
=======</span>
&lt;textarea id="junk"&gt;&lt;/textarea&gt;
<span class="ct">Script
=======</span>
$('#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}'
]
},
<span class="comment">// Added here as an example on how to add combos</span>
combos : {
'a' : { e: '\u00e6' },
'A' : { E: '\u00c6' }
},
<span class="comment">// example callback function</span>
accepted : function(e, keyboard, el){ alert('The content "' + el.value + '" was accepted!'); }
})
.addTyping();</code></pre>
</div>
<br>
<small>
* Use shift key - see action key sizes.<br>
* Use the decimal - only one allowed.<br>
* Type in 'ae' and other combo keys.<br>
* Accept content to see the callback.
</small>
</div>
<div class="block">
<h2><span class="tooltip" title="Click to see code">Custom: Mapped Keys</span></h2>
<textarea id="map"></textarea>
<div class="code ui-corner-all" style="width: 745px; height: 285px;">
<pre><code><span class="ct">HTML
=======</span>
&lt;textarea id="map"&gt;&lt;/textarea&gt;
<span class="ct">Script
=======</span>
<span class="comment">// *** Mapped keys ***</span>
$('#map').keyboard({
layout: 'custom',
customLayout: {
'default' : [
<span class="comment">// "n(a):title_or_tooltip"; n = new key, (a) = actual key, ":label" = title_or_tooltip (use an underscore "_" in place of a space " ")</span>
'\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)', <span class="comment">// lower case Greek</span>
'{shift} {accept} {cancel}'
],
'shift' : [
'\u0391(A) \u0392(B) \u0393(C) \u0394(D) \u0395(E) \u0396(F) \u0397(G)', <span class="comment">// upper case Greek</span>
'{shift} {accept} {cancel}'
]
},
usePreview: false <span class="comment">// no preveiw</span>
});</code></pre>
</div>
<br>
<small>
* No preview window.<br>
* Type in a-g.<br>
* Type in A-G (shifted).<br>
</small>
</div>
<div class="block">
<h2><span class="tooltip" title="Click to see 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" style="width: 350px; height: 200px;">
<pre><code><span class="ct">HTML
=======</span>
&lt;a href="#" class="hiddenInput"&gt;Hidden input&lt;/a&gt;
<span class="comment">&lt;!-- DON'T use type="hidden" because IE doesn't like hidden inputs --&gt;</span>
&lt;input id="hidden" type="text" style="display:none;"&gt;
<span class="ct">Script
=======</span>
<span class="comment">// *** Hidden input example ***
// click on a link - add focus to hidden input</span>
$('.hiddenInput').click(function(){
$('#hidden').trigger('focus.keyboard');
return false;
});
<span class="comment">// Initialize keyboard script on hidden input
// set "position.of" to the same link as above</span>
$('#hidden')
.keyboard({
layout : 'qwerty',
position : {
of : $('.hiddenInput'),
my : 'center top',
at : 'center top'
}
})
.addTyping();</code></pre>
</div>
</div>
<div id="showcode"></div>
<div id="footer"></div>
</div>
</body></html>