Virtual Keyboard Playground

https://github.com/Mottie/Keyboard

by Mottie

HTML

<link rel="stylesheet" href="https://mottie.github.io/Keyboard/css/keyboard.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css">
<script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.js"></script>
<script src="https://mottie.github.io/Keyboard/js/jquery.mousewheel.js"></script>
<script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.extension-typing.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.extension-altkeyspopup.js"></script>
<div id="wrap">
    <input id="keyboard" type="text" />
</div>

CSS

/* https://github.com/Mottie/Keyboard
 * Altkeys extension demo
   Documentation for this extension can be found at
   https://github.com/Mottie/Keyboard/wiki/Setup#altkeyspopup
 
 * press & hold any of the following keys to open the corresponding popup:
 * Extension default keys: 1234567890acdeghijklnorstuwyz'ACDEGHIJKLNORSTUWYZ!$()"?
 * This demo extra keys: [, ], Enter, emote (☺), or ✙ key
*/

body {
    margin-top: 200px;
}
#wrap {
    display: block;
    margin: 0 auto;
    width: 200px;
}

JavaScript

/* VIRTUAL KEYBOARD DEMO - https://github.com/Mottie/Keyboard */
/* 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'],
 ...