Extension Navigation

Navigation (Demo)

Allows navigating the virtual keyboard using the arrow keys (use F1 to toggle the mode).

Setup

Page Head

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<!-- jQuery UI theme or Bootstrap (optional, if you create a custom theme) -->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- jQuery UI position utility (optional, if you position the keyboard yourself) -->
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>

<!-- keyboard widget css & script -->
<link href="css/keyboard.css" rel="stylesheet">
<script src="js/jquery.keyboard.js"></script>
<script src="js/jquery.keyboard.extension-navigation.js"></script>

<!-- optional plugins -->
<script src="js/jquery.mousewheel.js"></script>

CSS

CSS needed to better highlight the action keys (shift, enter, accept, etc)

/* 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;
}

Javascript

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

    // **** deprecated ****
    // now set by $.keyboard.navigationKeys.toggle;
    // default set as 112 (event.which value for function 1 key)
    // toggleKey  : null
  });

Options

Position

Default: [0,0] Type: Number

Set start position [row-number, key-index] when navigation first becomes active.

toggleMode

Default: false Type: Boolean

When set to true, navigation of the virtual keyboard using navigation keys (arrow, page up/down, home & end) is active.

When false, navigation is disabled. The navigation keys only work inside the input or textarea.

focusClass

Default: "hasFocus" Type: String

CSS class added to the keyboard container when the toggle mode is active. In the css provided, the container border is changed to a light blue when active.

Navigation methods

Target a key

// use either "navigate" or "navigateTo" (they are the same)
var row = 2, // third row from the top (zero-based index)
  index = 1; // second key from the left (zero-based index);
$('#keyboard').trigger('navigateTo', [ row, index ]);

Execute an action

/* keys from $.keyboard.navigationKeys
 Always active actions:
 ======================
  'toggle', 'caretRight' & 'caretLeft'
  Any defined $.keyboard.keyaction

 Additional actions, when toggle is active:
 ==========================================
  'enter', 'pageup', 'pagedown', 'end', 'home',
  'left', 'up', 'right', 'down',
  'caretrt', 'caretlt'
*/
var $keyboard = $('#keyboard'),
  keyboard = $keyboard.data('keyboard');

// enable the navigation
$keyboard.trigger('navigate', 'toggle');

// Show shift keyset
keyboard.showKeySet('shift'); // new in v1.23.2
// select the 2nd row, 5th key
$keyboard.trigger('navigateTo', [ 2,5 ]);
// press enter
$keyboard.trigger('navigate', 'enter');
// show "normal" keyset
keyboard.showKeySet(''); // "normal"/default keyset
// select the first row, 8th key
$keyboard.trigger('navigate', [ 1,8 ]);
// press enter
$keyboard.trigger('navigate', 'enter');
// disable navigation
$keyboard.trigger('navigate', 'toggle');