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	addButtonTheme(buttons: string, className: string): * Adds/Modifies an entry to the `buttonTheme`.
public	buttonElements: object
public	caretEventHandler: * 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): * Handles clicks made to keyboard buttons
public	handleCaret: * Retrieves the current cursor position within a input or textarea (if any)
public	input: object simple-keyboard uses a non-persistent internal input to keep track of the entered string (the variable `keyboard.input`).
public	keyboardDOM: * Processing options
public	keyboardDOMClass: string
public	onInit: * Executes the callback function once simple-keyboard is rendered for the first time (on initialization).
public	onRender: * Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
public	options: object
public	physicalKeyboardInterface: * Physical Keyboard support
public	removeButtonTheme(buttons: string, className: string): * 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	setOptions(option: object): * Set new option or modify existing ones after initialization.
public	syncInstanceInputs: * Send a command to all simple-keyboard instances (if you have several instances).
public	utilities: * Initializing Utilities

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 addButtonTheme(buttons: string, className: string): * source

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

public buttonElements: object source

public caretEventHandler: * source

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

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.

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

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

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.

public getInput(inputName: string): * source

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

public handleButtonClicked(button: string): * source

Handles clicks made to keyboard buttons

public handleCaret: * source

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

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 keyboardDOM: * source

Processing options

public keyboardDOMClass: string source

public onInit: * source

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

public onRender: * source

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

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.
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 removeButtonTheme(buttons: string, className: string): * source

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

public render: * source

Renders rows and buttons as per options

public replaceInput(inputObj: object): * source

Replace the input object (keyboard.input)

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

Set the keyboard’s input.

public setOptions(option: object): * source

Set new option or modify existing ones after initialization.

public syncInstanceInputs: * source

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

public utilities: * source

Initializing Utilities