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],
    // selected key wraps from the end of the row to the beginning, and vice versa
    rowLooping : false,
    // 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.

rowLooping

Default: false
Type: Boolean

When true, pressing right when the furthest right key is selected will change the selected key to the first key in the row and when on the furthest left key is selected in a row, pressing left will wrap to the last key in the row.

When false, no looping occurs.

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');