SystelabVirtualKeyboard

Systelab Virtual Keyboard is a on-screen keyboard focused on touch devices.

Using the directive

Before use the directive you have to import the module into your application.

NgModule({
  imports: [
    ...,
    SystelabVirtualKeyboardModule.forRoot(config),
  ]
})

Where config is an object with type SystelabVirtualKeyboardConfig. See SystelabVirtualKeyboardConfig for details

Then the virtual keyboard can be enabled for inputs or textareas. To enable it the attribute vkEnabled can be used into the desire HTML element. It can be binding dynamically in the same way [vkEnabled]="vkEnabledVariable"

<input class="input" type="number" placeholder="Numeric input default layout" vkEnabled vkFixedBottom [vkConfig]="vkConfig">

Directive options

The default behaviour can be changed through some attributes:

Name	Type	Default	Description
vkEnabled	boolean	true	Enable the virtual keyboard for the element. If the property exists, the default value is true; if not, is false
vkFixedBottom	booles	true	Fix the virtual keyboard to the bottom of the page. If the property exists, the default value is true; if not, is false
vkConfig	SystelabVirtualKeyboardConfig		Configuration object that overrides some default behaviours. See SystelabVirtualKeyboardConfig for details

Configuration object

The configuration params are describe into the interface SystelabVirtualKeyboardConfig

Name	Type	Default	Description
layout	SystelabVirtualKeyboardLayouts		Usually the virtual keyboard select the layout between default or numeric depending on the input type. But with the config object you can override this behaviour and force the desired layout. The available layouts are described in the enum SystelabVirtualKeyboardLayouts
inputMethod	SystelabVirtualKeyboardInputMethods		The method detected for the keyboard to click or touch the keys
showButton	boolean	false	Show or hide the button for showing the keyboard
showOnMouseClick	boolean	false	Shows virtual keyboard upon mouse click on input field