Extension Typing

Typing (Demo)

• Highlights virtual keyboard keys as the user types on a physical keyboard.
• Change the virtual keyboard keyset when the user presses a modifier key (e.g. Shift, Alt, etc) on the physical keyboard.
• Adds a typing simulator for visualization or simulation of typing into the virtual keyboard; this is useful in tutorials, or to assist user input.

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-typing.js"></script>

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

Javascript

// Setup: targeting a specific keyboard, or use
// $('.ui-keyboard-input') to target all
$('#keyboard')
  .keyboard()
  .addTyping({
    // if true, typing on real keyboard will not highlight keys on the keyboard
    showTyping : true,
    // prevent user typing WHILE using the typing simulator `.typeIn('foobar')`
    lockTypeIn : false,
    // change default simulated typing delay
    delay      : 250
  });

Options

showTyping

Default: true
Type: Boolean

When false, only the typing within the input is simulated. When true:

• Keys on the virtual keyboard are highlighted as the user types on a physical keyboard.
• The keyset is changed when a modifier key is pressed (e.g. Shift, Ctrl); NOTE This does not properly work when the user presses the Alt key as the OS shifts focus to the menu.

lockTypeIn

Default: false
Type: Boolean

When false, user interaction with the physical keyboard is allowed; simulated typing will continue until complete or the keyboard is closed. When true:

• User input on the physical keyboard is prevented; but the user can still press Esc to close the keyboard.
• Pressing virtual keys is still allowed.

delay

Default: 250
Type: Number

Set a delay between each simulated typing event using the typeIn function. As of core v1.26.17, this setting can be set to zero, but please be aware that the simulated hover highlighting of the key is effected by this value and

hoverDelay

Default: 250
Type: Number

Sets the length of time the key highlight is applied. When the delay value is less than this hoverDelay, setting, the lower of the two values becomes the hover delay. This prevents the highlight from still being visible after a value has been inserted.

Simulated typing

Usage

keyboard.reveal().typeIn('text', time, callback);

• 'text' will be entered into the keyboard one character at a time; include any these action keys:
  • caret left = {l}
  • caret right = {r}
  • delete = {d}
  • tab = \t or {t}
  • backspace = \b or {b}
  • enter = \n or \r or {e}
• time is the time in milliseconds between key strokes.
• callback is a function that is called when typing has completed.

Example:

// the following will type in the text with a 500ms delay then accept
// and close the keyboard when done.
var kb = $('#keyboard-input').getkeyboard();
kb
  .reveal()
  .typeIn('This is a test', 500, function(){ kb.accept(); });