<meta charset="utf-8">

<title>Virtual Keyboard Basic Demo</title>

<!-- demo -->

<link href="css/bootstrap.min.css" rel="stylesheet">

<link href="css/font-awesome.min.css" rel="stylesheet">

<link href="css/demo.css" rel="stylesheet">

<!-- jQuery & jQuery UI + theme (required) -->

<link href="css/jquery-ui.min.css" rel="stylesheet">

<script src="js/jquery.min.js"></script>

<script src="js/jquery-ui.min.js"></script>

<script src="js/bootstrap.min.js"></script>

<!-- keyboard widget css & script (required) -->

<link href="../css/keyboard.css" rel="stylesheet">

<style>

code { background: #333; padding: 2px 4px; }

#footer2 div { text-align: left; }

</style>

<script src="../js/jquery.keyboard.js"></script>

<!-- keyboard extensions (optional) -->

<script src="../js/jquery.mousewheel.js"></script>

<script src="../js/jquery.keyboard.extension-altkeyspopup.js"></script>

<!-- initialize keyboard (required) -->

<script>

/* add some custom popups */

$.extend( $.keyboard.altKeys, {

1 : '\u2460 \u2474 \u2488 \u2776 \u278a \u2780',

'!' : '\u00a1 \u2762 \u2763', // adding two more exclamation points!

2 : '\u2461 \u2475 \u2489 \u2777 \u278b \u2781',

3 : '\u2462 \u2476 \u248a \u2778 \u278c \u2782',

4 : '\u2463 \u2477 \u248b \u2779 \u278d \u2783',

5 : '\u2464 \u2478 \u248c \u277a \u278e \u2784',

6 : '\u2465 \u2479 \u248d \u277b \u278f \u2785',

7 : '\u2466 \u247a \u248e \u277c \u2790 \u2786',

8 : '\u2467 \u247b \u248f \u277d \u2791 \u2787',

9 : '\u2468 \u247c \u2490 \u277e \u2792 \u2788',

0 : '\u2469 \u247d \u2491 \u277f \u2793 \u2789',

'[' : '\u25c0 \u25c1 \u25c2 \u25c3 \u25c4 \u25c5 \u261a \u261c', // left arrows

']' : '\u25b6 \u25b7 \u25b8 \u25b9 \u25ba \u25bb \u261b \u261e', // right arrows

// action keys the "!!" makes the button get the "ui-state-active" (set by the css.buttonActive option)

'enter' : '{!!clear} {!!a} {!!c}',

// smileys, card suits, & other symbols

'\u263a' : '\u2639 \u263b \u2660 \u2661 \u2662 \u2663 \u2664 \u2665 \u2666 \u2667 \u2766 \u2767 \u263c \u263d \u263e \u2605 \u2606',

// symbols with 4+ arms

'\u2719' : '\u271a \u271b \u271c \u271d \u271e \u271f \u2720 \u2721 \u2722 \u2723 \u2724 \u2725 \u2726 \u2727 \u2729 \u272a \u272b \u272c \u272d \u272e \u272f \u2730 \u2731 \u2732 \u2733 \u2734 \u2735 \u2736 \u2737 \u2738 \u2739 \u273a \u273b \u273c \u273d \u273e \u273f \u2740 \u2741 \u2742 \u2743 \u2744 \u2745 \u2746 \u2747 \u2748 \u2749 \u274a \u274b \u2756'

});

$(function(){

$('#keyboard').keyboard({

layout: 'custom',

customLayout: {

'normal': [

'` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',

'{t} 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} {cancel} \u263a \u2719'

],

'shift': [

'~ ! @ # $ % ^ & * ( ) _ + {bksp}',

'{t} 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} {cancel} \u263a \u2719'

]

},

repeatRate : 0

}).addAltKeyPopup({

// time to hold down a button in ms to trigger a popup

holdTime : 500,

// event triggered when popup is visible

// access the overlay from keyboard.altKeyPopup_$overlay

// or the keys container from keyboard.altKeyPopup_$overlay.find('.ui-keyboard-popup')

// or the keys from keyboard.altKeyPopup_$overlay.find('.ui-keyboard-button')

popupVisible : 'popup-visible'

});

});

</script>

<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><a href="../index.html">Home</a></li>

<li><a href="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="layouts.html">Standard</a></li>

<li><a href="layouts2.html">Greywyvern</a></li>

<li><a href="layouts3.html">Microsoft Keyboard</a></li>

<li><a href="calculator.html"><span class="fa fa-calculator fa-lg"></span> Calculator</a></li>

</ul>

</li>

<li class="dropdown active">

<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 class="active"><a href="altkeys-popup.html">Alt-keys <span class="sr-only">(current)</span></a></li>

<li><a href="../index.html#autocomplete">Autocomplete</a></li>

<li><a href="../index.html#caret">Caret</a></li>

<li><a href="extender.html">Extender</a></li>

<li><a href="preview-keyset.html">Keyset</a></li>

<li><a href="mobile.html">Mobile</a></li>

<li><a href="jquery-mobile-1.4.html">Mobile v1.4</a></li>

<li><a href="navigate.html">Navigate</a></li>

<li><a href="scramble.html">Scramble</a></li>

<li><a href="../index.html#typing">Typing</a></li>

</ul>

</li>

<li><a href="//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="//github.com/Mottie/Keyboard"><span class="fa fa-github fa-lg" title="GitHub"></span></a></li>

<li><a href="//github.com/Mottie/Keyboard/archive/master.zip"><span class="fa fa-download fa-lg" title="Download"></span></a></li>

<li><a href="//github.com/Mottie/Keyboard/wiki"><span class="fa fa-file-text-o fa-lg" title="Documentation"></span></a></li>

<li><a href="//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>

<h1><a href="//github.com/Mottie/Keyboard">Virtual Keyboard Alt-Keys Popup Demo</a></h1>

<h4>Note: Look at this demo source or refer to the <a href="//github.com/Mottie/Keyboard/wiki/Setup#wiki-alt-key-popup">documentation</a> on how to set up this extension.</h4>

<div class="block2"> <!-- wrapper only needed to center the input -->

<!-- keyboard input -->

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

</div> <!-- End wrapper -->

<br class="clear" />

<div id="footer2">

<div>

<ul>

<li>Click or press and hold any of the following keys to see a popup:

<ul>

<li>Extension defaults: <code>1234567890acdeghijklnorstuwyz'ACDEGHIJKLNORSTUWYZ!$()"?</code></li>

<li>Demo extras: <code>[</code>, <code>]</code>, <code>enter</code>, <code>&#x263a;</code> &amp; <code>&#x2719;</code> (examine the source code of this page to see how these were added).</li>

</ul> </li>

<li>The keys within the popup are completely customizable. In fact they can include any action key (click or press and hold the enter key).</li>

</ul>

</div>

</div>