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.
Join the infusion-users mailing list and ask your questions there.
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 |
---|---|---|---|
| Whether or not the sticky key feature is enabled. |
| false |
shiftLatched | Whether or not the SHIFT key is latched. | Boolean | false |
userInput | The user input. | String | "" |
Supported Events
Event | Type | Description | Parameters | Parameter Description |
---|---|---|---|---|
| default | Fired when the SHIFT key is pressed. |
| N/A |
keypress | default | Fired when a key is pressed . | String | The character associated with the pressed key |
shiftLatchChange | default | Fired 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 |
---|---|---|
| Unlatches the SHIFT. | None |
updateShiftLatchedClass | Toggles the css class based on whether or not the SHIFT key is latched. | None |
clearInput | Clears the input field. | None |
openTooltipIfNotFocused | Opens 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 |
toggleShiftLatched | Toggles the latched state of the SHIFT key. | None |
Options
Name | Description | Values | Default |
---|---|---|---|
| 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. |
| 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>