Twelve-Key On-Screen Touch Keypad for Angular
A twelve key (0-9, * and #) keypad on-screen touch keyboard for Angular applications.
Keypad assignments are based on ETSI ES 202 130 V2.1.2 .
Supported languages are:
Add a missing language
Feel free to add any missing languages. You can find a standardized keypad assignment for many languages here .
To add a language:
Add the respective key-assignment file in
src/lib/key-assignmentsbased on its ISO language name.
Add the ISO-639-2/B code of the language to the mapping file
Feel free to submit a pull request with the added language.
The library is published on npm. To install:
npm install ngx-onscreen-twelvekeyboard
The selector of the main component (
The component has the following inputs(
buttonTemplate: TemplateRef<any>: The template to use for the buttons. See Theming for more information.
backspaceTemplate: TemplateRef<any>: The template to use for the backspace button.
clearTemplate: TemplateRef<any>: The template to use for the clear button.
backspaceEnabled: boolean: Whether to enable the backspace button.
clearEnabled: boolean: Whether to enable the clear button.
shift: boolean: Switches between upper and lower case characters. Emits
valuehas been updated.
language: string: The language to use, as ISO-639-2/B. Defaults to
'eng'. Needs to be a language defined in
timeoutDuration: number: Specifies the duration of the timeout until the selected character is added. Defaults to
value: string: The internal value of the keyboard, should be bound to an
<input>element, updates only after the timeout has expired OR a different key than before has been pressed.
pressedKeys: string: A string containing all pressed keys. Updates immediately on button click.
vanity: string: A regex that corresponds to the character assignments of the pressed keys. Updates immediately on button click.
The keypad allows you to enable text input with restricted screen real estate and no other means of text input. For example on touch screen only devices.
Each key is mapped to a list of characters as defined by the selected
Once a button is pressed, a timeout with the specified
timeoutDuration is started and the current
character index is set to 0. For each subsequent button press, the index is incremented by 1 and the
timeout is restarted.
When the timeout expires, the character selected by the current index is emitted to
To quickly output characters, the currently selected character is emitted if a different button than the previously pressed button is selected, regardless of timeout. For example, pressing 2,3,2,3 in quick succession would output 'ada' and after timeout 'adad'.
TODO add animation
If not using the helper directive (see below), it is required to sync the internal value of the
keypad with the bound control. You can use the
[(value)] input/output to do so.
The library provides a directive
[keypadBinding] to bind
<input> elements to the keypad,
supporting Angulars Reactive Forms. The directive requires the keypad to be passed. The directive
also outputs an event on
true when focused or
false when blurred.
When a keypad is bound to this directive, the
(inputFocus) output on the keypad emits an event,
true when focused or
false when blurred.
<input [formControl]="inputFormControl" [keypadBinding]="keypad" matInput>
The keypad allows you to easily implement a vanity search function. The
vanity output emits a
string on each button press corresponding to a regex. This regex matches the character mappings of
the pressed keys.
Given the names
you can map these names to the keys
through the character mappings of the keys (1: 'abc...', 2: 'def...', 3: 'ghi...' and so on).
For the key sequence 326435
vanity will output, depending on the language (here english)
You can use the regex as a filter for, i.e. a list of contacts.
KeypadComponent is styled using flexbox. It takes the following CSS variables:
--osk-row-gap: Row gap between the button rows.
--osk-col-gap: Column gap between the button columns.
Also see Custom button template
To define your own button template
KeypadComponent accepts a
Define a template in your code, for example to style the buttons as Angular
<ng-template #youMayUseAnyName let-click="click" let-content="content"> <button (mousedown)="click($event)"> <ng-container [ngTemplateOutlet]="content"></ng-container> </button> </ng-template>
And then pass it on to the
If no template is provided, the default template is used.
It is required to specify the
ng-containerelement in your template and pass the content from the template variable to it, otherwise the buttons will have no content. If desired you can omit the
ng-containerelement and place your own content, mind that in this case, all buttons will have the same content. Please create an issue if you have a use case, where the default behavior is not sufficient.
Custom backspace/clear button template
You can specify a custom backspace or clear button template, by providing a
<ng-template #backspaceTemplate> <span><-</span> </ng-template> <ng-template #clearTemplate> <span>x</span> </ng-template> <osk-keypad [backspaceTemplate]="backspaceTemplate" [clearTemplate]="clearTemplate"></osk-keypad>
Remember that you need to enable these keys explicitly by setting