Home

Awesome

AngularTouchKeyboard

MIT licensed npm version Build Status

What is this?

Virtual Keyboard for Angular applications.

angular touch keyboard

Demo

https://mohsen77sk.github.io/angular-touch-keyboard/

Install

Step 1: Install ngx-touch-keyboard

npm install @angular/cdk ngx-touch-keyboard

Step 2: Import the module

Add ngxTouchKeyboardModule as an import in your app's root NgModule.

import { ngxTouchKeyboardModule }  from 'ngx-touch-keyboard';
@NgModule({
  ...
  imports: [
    ...
    ngxTouchKeyboardModule,
  ],
  ...
})
export class AppModule { }

Compatibility

Version [3.0.0]

Version [2.0.0]

Localization

AngularTouchKeyboard is localized in 7 keyboard-specific locales:

Usage

Simple usage example

<input
  type="text"
  ngxTouchKeyboard
  #touchKeyboard="ngxTouchKeyboard"
  (focus)="touchKeyboard.openPanel()"
/>

Locale usage example

<input
  type="text"
  ngxTouchKeyboard="fa-IR"
  #touchKeyboard="ngxTouchKeyboard"
  (focus)="touchKeyboard.openPanel()"
/>

Material usage example

<mat-form-field>
  <mat-label>Default</mat-label>
  <input
    matInput
    type="text"
    ngxTouchKeyboard
    #touchKeyboard="ngxTouchKeyboard"
  />
  <button
    mat-icon-button
    matSuffix
    type="button"
    (click)="touchKeyboard.togglePanel()"
  >
    <mat-icon> keyboard </mat-icon>
  </button>
</mat-form-field>

Properties

PropertyDescription
ngxTouchKeyboardRequired to initialize Virtual Keyboard to specified input.
ngxTouchKeyboardDebugDebug mode is on.
ngxTouchKeyboardFullScreenFull screen mode is on.

Methods

Here's the list of all available methods:

MethodsDescription
openPanel(): voidOpen keyboard panel
closePanel(): voidClose keyboard panel
togglePanel(): voidToggle keyboard panel

Themes

Built-in themes

You must put the class dark in the body to use the dark theme.

Create custom theme

To customize the theme, you need to use css variables.

NameDescription
--tk-color-textcolor of text button
--tk-backgroundcolor of background panel
--tk-background-buttoncolor of background basic button
--tk-background-button-fncolor of background functional button
--tk-background-button-activecolor of background active button

Layouts

Depends on attribute inputmode, the keyboard layout is changed.

inputmodeScreenshot
inputmode='text'angular touch keyboard
inputmode='search'angular touch keyboard
inputmode='email'angular touch keyboard
inputmode='url'angular touch keyboard
inputmode='numeric'angular touch keyboard
inputmode='decimal'angular touch keyboard
inputmode='tel'angular touch keyboard

Development

The most useful commands for development are:

License

The MIT License (MIT)