Home Reference Source 
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
public

Only first instance should insall the caret handling events
public

Get module prop
public

getModulesList
public
public
public

Ensures that onInit is only called once per instantiation
public

simple-keyboard uses a non-persistent internal input to keep track of the entered string (the variable keyboard.input).
public
public

Processing options
public
public
public

modules: {}

Modules
public
public

Physical Keyboard support
public

Register module
public

setOptions(option: object): *

Set new option or modify existing ones after initialization.
public

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

Handles clicks made to keyboard buttons
public

handleButtonHold(button: *)

Handles button hold
public

handleButtonMouseDown(button: *, e: *)

Handles button mousedown
public

Handles button mouseup
public

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

Load modules
public

onInit()

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

Executes the callback function once all modules have been loaded
public

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

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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
inputName string
  • optional

optional - the internal input to select

Return:

*

public handleButtonClicked(button: string): boolean source

Handles clicks made to keyboard buttons

Params:

NameTypeAttributeDescription
button string

The button's layout name.

Return:

boolean

public handleButtonHold(button: *) source

Handles button hold

Params:

NameTypeAttributeDescription
button *

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

Handles button mousedown

Params:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
inputObj object

The input object

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

Set the keyboard’s input.

Params:

NameTypeAttributeDescription
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).