Virtual Keyboard Playground

https://github.com/Mottie/Keyboard

by Mottie

HTML

<link rel="stylesheet" href="//mottie.github.io/Keyboard/docs/css/demo.css">
<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://mottie.github.io/Keyboard/js/jquery.keyboard.extension-navigation.js"></script>
<div id="wrap">
  <textarea id="keyboard"></textarea>
</div>

<div id="info">
  <ul>
    <li><strong>Always active:</strong>
      <ul>
        <li><strong>Clear</strong> - Clear content.</li>
        <li><strong>&larr;</strong> - Move caret left.</li>
        <li><strong>&rarr;</strong> - Move caret right.</li>
        <li><strong>Backspace</strong> - Delete character to the left.<p></p>
        </li>
      </ul><br />
    </li>
    <li><strong>Toggle must be active to use:</strong>
      <ul>
        <li><strong>Home</strong> - Move to the first key in the row.</li>
        <li><strong>Up</strong> - Move up one row.</li>
        <li><strong>Page Up</strong> - Move to the first row.</li>
        <li><strong>Left</strong> - Move one key left.</li>
        <li><strong>Shift-F1</strong> - Toggle navigation (textarea and keyboard).</li>
        <li><strong>Right</strong> - Move one key right.</li>
        <li><strong>End</strong> - Move to the last key in the row.</li>
        <li><strong>Down</strong> - Move down one row.</li>
        <li><strong>Page Down</strong> - Move to the last row.</li>
        <li><strong>Delete</strong> (&larr; Caret) - Move caret left.</li>
        <li><strong>Enter</strong> - Add the highlighted key.</li>
        <li><strong>Insert</strong> (Caret &rarr;) - Move caret right.</li>
      </ul>
    </li>
  </ul>

 ...

CSS

/* https://github.com/Mottie/Keyboard
 * Navigate extension demo
   Documentation for this extension can be found at
   https://github.com/Mottie/Keyboard/wiki/Setup#navigation
 
 * Click the [toggle] button to use the navigation controls
*/

/* Add this css so we can see when the action (orange) keys are highlighted */
.ui-keyboard-button.ui-state-active.ui-state-hover {
  border: 1px solid #fff;
  -moz-box-shadow: 1px 1em 1px #ffba2b inset;
  -webkit-box-shadow: 1px 1em 1px #ffba2b inset;
  box-shadow: 1px 1em 1px #ffba2b inset;
}

/* Class added to indicate the virtual keyboard has navigation focus */
.hasFocus {
  border-color: #59b4d4;
}


/* demo styling */
body {
  background: #fff;
  font-size: 10px;
  margin-top: 10px;
}

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

#info {
  margin-top: 150px;
}

#info li {
  color: #222;
}

#info>ul ul strong {
  color: #333;
  font-weight: bold;
}

JavaScript

$(function() {

  // change default navigation keys
  $.extend($.keyboard.navigationKeys, {
    // all keys
    toggle: 112, // toggle key; F1 = 112 (event.which value for function 1 key)
    enter: 13,
    pageup: 33,
    pagedown: 34,
    end: 35,
    home: 36,
    left: 37,
    up: 38,
    right: 39,
    down: 40,
    // move caret WITH navigate toggle active
    caretrt: 45, // Insert key
    caretlt: 46, // delete key

    /* Custom Navigation Functions
     * move caret without navigate toggle active */
    caretright: function(kb) {
      $.keyboard.keyaction.right(kb);
    },
    caretleft: function(kb) {
      $.keyboard.keyaction.left(kb);
    }

  });

  // External trigger using any of the $.keyboard.navigationKeys keys (key:value)
  // no need to toggle first
  // $('#keyboard').trigger('navigate', 'home');

  // or, navigate to a specific key [ row, index ] (both use zero-based indexes)
  // $('#keyboard').trigger('navigateTo', [2,3]);

  // mini navigation block
  $('#info button').click(function() {

    var $button = $(this),
      action = $button.attr('data-action');
    if (action === 'toggle') {
      // cruddy code to highlight the toggle button while active
      var toggleMode = $('textarea').data('keyboard').navigation_options.toggleMode;
      $button.toggleClass('active', !toggleMode);
    }
    $('textarea').trigger('navigate', action);
  });

  $('#keyboard')
    .keyboard({
      alwaysOpen: true
    })
    .addNavigation({
      position: [0, 0], // set start position [row-number, key-index]
      toggleMode: false, // true = navigate the virtual keyboard, false = navigate in input/textarea
      focusClass: 'hasFocus' // css class added when toggle mode is on
    });

});