Keyboard Input API

Keyboard Input Overview

When a character is entered via a keyboard, if the SHIFT key is not latched, the keyboard input component shows the character itself, otherwise, it shows the corresponding SHIFT latched character.


Adding a Keyboard Input Component

Option 1: Typically used as a sub-component of a Sticky Key Panel.

Adding as sub-component:

keyboardInput: {
    type: "gpii.firstDiscovery.keyboardInput",
    container: "{that}.dom.input",
    options: {}
}

Option 2: Adding as a stand alone component:

var myKeyboardInput = gpii.firstDiscovery.keyboardInput(container, options);

Grades

The base grades used by the Keyboard Input:

Model

Path

Description

Values

Default

stickyKeysEnabled

Whether or not the sticky key feature is enabled.

Boolean

false
shiftLatchedWhether or not the SHIFT key is latched.Booleanfalse
userInput
The user input.String
""

Supported Events

EventType

Description

Parameters

Parameter Description

shiftKeydown

default

Fired when the SHIFT key is pressed.

None

N/A
keypressdefaultFired when a key is pressed .StringThe character associated with the pressed key
shiftLatchChange
defaultFired when the SHIFT is pressed and the sticky key preference has already been turned on.Component  An instance of gpii.firstDiscovery.keyboardInput

Methods

Method

Description

Parameters

unlatchShift

Unlatches the SHIFT.

None

updateShiftLatchedClass

Toggles the css class based on whether or not the SHIFT key is latched.

None
clearInputClears the input field.

None

openTooltipIfNotFocusedOpens the tooltip for the input field even when the input field does not have focus, for example, when the mouse hovers over the input field.None
toggleShiftLatchedToggles the latched state of the SHIFT key.None

Options

Name

Description

Values

Default

styles

Specific class names used to achieve the look and feel. Its "shiftLatched" element is to specify the class names applied to the input field when the SHIFT key is latched.

Object

 

styles: {
	shiftLatched: "gpii-keyboardInput-shiftLatched"
}

 

Dependencies

<script type="text/javascript" src="src/lib/infusion/infusion-custom.js"></script>
<script type="text/javascript" src="src/js/tooltip.js"></script>
<script type="text/javascript" src="src/js/msgLookup.js"></script>
<script type="text/javascript" src="src/js/keyboardInput.js"></script>