# SimpleKeyboard | simple-keyboard
On-screen Javascript Virtual Keyboard

    import SimpleKeyboard from 'simple-keyboard/src/lib/components/Keyboard.js'

public class | source

# SimpleKeyboard

Root class for simple-keyboard This class:

- Parses the options
- Renders the rows and buttons
- Handles button functionality

## Constructor Summary

Public Constructor
public | constructor (params: Array) Creates an instance of SimpleKeyboard |

## Member Summary

Public Members
public | buttonElements : object |
public | caretPosition : * Only first instance should insall the caret handling events |
public | getModuleProp : * Get module prop |
public | getModulesList : * getModulesList |
public | holdInteractionTimeout : object |
public | holdTimeout : object |
public | initialized : boolean Ensures that onInit is only called once per instantiation |
public | input : object simple-keyboard uses a non-persistent internal input to keep track of the entered string (the variable `keyboard.input`). |
public | isMouseHold : boolean |
public | keyboardDOM : * Processing options |
public | keyboardDOMClass : string |
public | keyboardPluginClasses : object |
public | modules : {} Modules |
public | options : object |
public | physicalKeyboardInterface : * Physical Keyboard support |
public | registerModule : * Register module |
public | setOptions (option: object): * Set new option or modify existing ones after initialization. |
public | utilities : * Initializing Utilities |

## Method Summary

Public Methods
public | addButtonTheme (buttons: string, className: string): boolean Adds/Modifies an entry to the `buttonTheme`. |
public | caretEventHandler (event: *) Called by handleCaret when an event that warrants a cursor position update is triggered |
public | clear () Remove all keyboard rows and reset keyboard values. |
public | clearInput (inputName: string) Clear the keyboard’s input. |
public | dispatch (callback: function (instance: object, key: string)): * Send a command to all simple-keyboard instances at once (if you have multiple instances). |
public | getButtonElement (button: string): * Get the DOM Element of a button. |
public | getInput (inputName: string): * Get the keyboard’s input (You can also get it from the onChange prop). |
public | handleButtonClicked (button: string): boolean Handles clicks made to keyboard buttons |
public | handleButtonHold (button: *) Handles button hold |
public | handleButtonMouseDown (button: *, e: *) Handles button mousedown |
public | handleButtonMouseUp () Handles button mouseup |
public | handleCaret () Retrieves the current cursor position within a input or textarea (if any) |
public | loadModules () Load modules |
public | onInit () Executes the callback function once simple-keyboard is rendered for the first time (on initialization). |
public | onModulesLoaded () Executes the callback function once all modules have been loaded |
public | onRender () Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts). |
public | removeButtonTheme (buttons: string, className: string): boolean Removes/Amends an entry to the `buttonTheme`. |
public | render () Renders rows and buttons as per options |
public | replaceInput (inputObj: object) Replace the input object (`keyboard.input`) |
public | setInput (input: string, inputName: string) Set the keyboard’s input. |
public | syncInstanceInputs () Send a command to all simple-keyboard instances (if you have several instances). |

## Public Constructors

### public constructor(params: Array) source

Creates an instance of SimpleKeyboard

#### Params:

Name | Type | Attribute | Description
params | Array |  | If first parameter is a string, it is considered the container class. The second parameter is then considered the options object. If first parameter is an object, it is considered the options object.

## Public Members

### public buttonElements: object source

### public caretPosition: * source

Only first instance should insall the caret handling events

### public getModuleProp: * source

Get module prop

### public getModulesList: * source

getModulesList

### public holdInteractionTimeout: object source

### public holdTimeout: object source

### public initialized: boolean source

Ensures that onInit is only called once per instantiation

### public input: object source

simple-keyboard uses a non-persistent internal input to keep track of the entered string (the variable `keyboard.input`). This removes any dependency to input DOM elements. You can type and directly display the value in a div element, for example.

#### Properties:

Name | Type | Attribute | Description
default | object |  | Default SimpleKeyboard internal input.
myInputName | object |  | Example input that can be set through `options.inputName:"myInputName"`.

#### Example:

    // To get entered input
    let input = keyboard.getInput();

    // To clear entered input.
    keyboard.clearInput();

### public isMouseHold: boolean source

### public keyboardDOM: * source

Processing options

### public keyboardDOMClass: string source

### public keyboardPluginClasses: object source

### public modules: {} source

Modules

### public options: object source

#### Properties:

Name | Type | Attribute | Description
layout | object |  | Modify the keyboard layout.
layoutName | string |  | Specifies which layout should be used.
display | object |  | Replaces variable buttons (such as {bksp}) with a human-friendly name (e.g.: “backspace”).
mergeDisplay | boolean |  | By default, when you set the display property, you replace the default one. This setting merges them instead.
theme | string |  | A prop to add your own css classes to the keyboard wrapper. You can add multiple classes separated by a space.
buttonTheme | Array |  | A prop to add your own css classes to one or several buttons.
debug | boolean |  | Runs a console.log every time a key is pressed. Displays the buttons pressed and the current input.
newLineOnEnter | boolean |  | Specifies whether clicking the “ENTER” button will input a newline (\n) or not.
tabCharOnTab | boolean |  | Specifies whether clicking the “TAB” button will input a tab character (\t) or not.
inputName | string |  | Allows you to use a single simple-keyboard instance for several inputs.
maxLength | number |  | Restrains all of simple-keyboard inputs to a certain length. This should be used in addition to the input element’s maxlengthattribute.
maxLength | object |  | Restrains simple-keyboard’s individual inputs to a certain length. This should be used in addition to the input element’s maxlengthattribute.
syncInstanceInputs | boolean |  | When set to true, this option synchronizes the internal input of every simple-keyboard instance.
physicalKeyboardHighlight | boolean |  | Enable highlighting of keys pressed on physical keyboard.
preventMouseDownDefault | boolean |  | Calling preventDefault for the mousedown events keeps the focus on the input.
physicalKeyboardHighlightTextColor | string |  | Define the text color that the physical keyboard highlighted key should have.
physicalKeyboardHighlightBgColor | string |  | Define the background color that the physical keyboard highlighted key should have.
onKeyPress | function (button: string): string |  | Executes the callback function on key press. Returns button layout name (i.e.: “{shift}”).
onChange | function (input: string): string |  | Executes the callback function on input change. Returns the current input’s string.
onRender | function |  | Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
onInit | function |  | Executes the callback function once simple-keyboard is rendered for the first time (on initialization).
onChangeAll | function (inputs: object): object |  | Executes the callback function on input change. Returns the input object with all defined inputs.

### public physicalKeyboardInterface: * source

Physical Keyboard support

### public registerModule: * source

Register module

### public setOptions(option: object): * source

Set new option or modify existing ones after initialization.

### public utilities: * source

Initializing Utilities

## Public Methods

### public addButtonTheme(buttons: string, className: string): boolean source

Adds/Modifies an entry to the `buttonTheme`. Basically a way to add a class to a button.

#### Params:

Name | Type | Attribute | Description
buttons | string |  | List of buttons to select (separated by a space).
className | string |  | Classes to give to the selected buttons (separated by space).

#### Return:

boolean

### public caretEventHandler(event: *) source

Called by handleCaret when an event that warrants a cursor position update is triggered

#### Params:

Name | Type | Attribute | Description
event | * |  |

### public clear() source

Remove all keyboard rows and reset keyboard values. Used interally between re-renders.

### public clearInput(inputName: string) source

Clear the keyboard’s input.

#### Params:

Name | Type | Attribute | Description

inputName

string

- optional

optional - the internal input to select

### public dispatch(callback: function (instance: object, key: string)): * source

Send a command to all simple-keyboard instances at once (if you have multiple instances).

#### Params:

Name | Type | Attribute | Description
callback | function (instance: object, key: string) |  | Function to run on every instance

#### Return:

*

### public getButtonElement(button: string): * source

Get the DOM Element of a button. If there are several buttons with the same name, an array of the DOM Elements is returned.

#### Params:

Name | Type | Attribute | Description
button | string |  | The button layout name to select

#### Return:

*

### public getInput(inputName: string): * source

Get the keyboard’s input (You can also get it from the onChange prop).

#### Params:

Name | Type | Attribute | Description

inputName

string

- optional

optional - the internal input to select

#### Return:

*

### public handleButtonClicked(button: string): boolean source

Handles clicks made to keyboard buttons

#### Params:

Name | Type | Attribute | Description
button | string |  | The button's layout name.

#### Return:

boolean

### public handleButtonHold(button: *) source

Handles button hold

#### Params:

Name | Type | Attribute | Description
button | * |  |

### public handleButtonMouseDown(button: *, e: *) source

Handles button mousedown

#### Params:

Name | Type | Attribute | Description
button | * |  |
e | * |  |

### public handleButtonMouseUp() source

Handles button mouseup

### public handleCaret() source

Retrieves the current cursor position within a input or textarea (if any)

### public loadModules() source

Load modules

### public onInit() source

Executes the callback function once simple-keyboard is rendered for the first time (on initialization).

### public onModulesLoaded() source

Executes the callback function once all modules have been loaded

### public onRender() source

Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).

### public removeButtonTheme(buttons: string, className: string): boolean source

Removes/Amends an entry to the `buttonTheme`. Basically a way to remove a class previously added to a button through buttonTheme or addButtonTheme.

#### Params:

Name | Type | Attribute | Description
buttons | string |  | List of buttons to select (separated by a space).
className | string |  | Classes to give to the selected buttons (separated by space).

#### Return:

boolean

### public render() source

Renders rows and buttons as per options

### public replaceInput(inputObj: object) source

Replace the input object (`keyboard.input`)

#### Params:

Name | Type | Attribute | Description
inputObj | object |  | The input object

### public setInput(input: string, inputName: string) source

Set the keyboard’s input.

#### Params:

Name | Type | Attribute | Description
input | string |  | the input value
inputName | string |  | optional - the internal input to select

### public syncInstanceInputs() source

Send a command to all simple-keyboard instances (if you have several instances).