AngularTouchKeyboard

An Angular touch keyboard component that provides a customizable on-screen keyboard for input elements. Fully compatible with Angular, Angular Material, and Ionic Framework.

Features

• 📱 Responsive virtual keyboard
• 🌐 Multiple locale support
• 🎯 Flexible positioning
• 🖥️ Full-screen mode support
• 🎨 Customizable appearance
• Ⓜ️ AngularMaterial support
• ⏺️ Ionic Framework support
• ⌨️ Smart native keyboard handling on mobile devices

Demo

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

Installation

npm install @angular/cdk ngx-touch-keyboard

Compatibility

The version of this library is synchronized with the major version of Angular to ensure compatibility.

Angular Version	Package Version
>= 18.0.0	4.x
>= 16.0.0	3.x
>= 14.0.0	2.x

Basic Usage

Import the NgxTouchKeyboardModule in your app.module.ts:

import { NgxTouchKeyboardModule } from 'ngx-touch-keyboard';

@NgModule({
  imports: [
    NgxTouchKeyboardModule
  ],
})
export class AppModule { }

If you want to set the custom locale, provide NGX_TOUCH_KEYBOARD_LOCALE by custom locale

• default locale is enUS

import { NGX_TOUCH_KEYBOARD_LOCALE, faIR } from 'ngx-touch-keyboard';

@NgModule({
  providers: [
    { provide: NGX_TOUCH_KEYBOARD_LOCALE, useValue: faIR }
  ],
})
export class AppModule { }

Add the directive to your input elements:

Basic usage

<input ngxTouchKeyboard [(ngxTouchKeyboardOpen)]="isOpen">

Open keyboard on input focus

<input ngxTouchKeyboard ngxTouchKeyboardOpenOnFocus>

Basic usage in Ionic

<ion-input ngxTouchKeyboard [(ngxTouchKeyboardOpen)]="isOpen"></ion-input>

API Reference

Directives

NgxTouchKeyboard

@Directive({
  selector: `input[ngxTouchKeyboard],
             textarea[ngxTouchKeyboard],
             ion-input[ngxTouchKeyboard],
             ion-textarea[ngxTouchKeyboard]`,
})

Inputs

Name	Type	Default	Description
ngxTouchKeyboardOpen	boolean	false	Controls the visibility of the keyboard
ngxTouchKeyboardOpenOnFocus	boolean	false	Open the visibility of the keyboard On focus
ngxTouchKeyboardLocale	Locale	enUS	Sets the keyboard locale
ngxTouchKeyboardFullScreen	boolean	false	Enables full-screen mode
ngxTouchKeyboardDebug	boolean	false	Enables debug mode
ngxConnectedTouchKeyboardOrigin	NgxTouchKeyboardOrigin	null	Sets a custom origin for the keyboard position

Methods

• openPanel(): Opens the keyboard panel
• closePanel(): Closes the keyboard panel
• togglePanel(): Toggles the keyboard panel visibility

Advanced Usage

Custom locale

<input ngxTouchKeyboard [ngxTouchKeyboardLocale]="faIR">

Full-Screen Mode

<input ngxTouchKeyboard [ngxTouchKeyboardFullScreen]="true">

Custom Position Origin

<div ngxTouchKeyboardOrigin #origin="ngxTouchKeyboardOrigin">
  <input ngxTouchKeyboard [ngxConnectedTouchKeyboardOrigin]="origin">
</div>

Localization

AngularTouchKeyboard is localized in 8 keyboard-specific locales:

• en-US English (United States) (default)
• en-UK English (United Kingdom)
• es-ES Spanish (Spain)
• fa-IR Persian (Iran)
• he-IL Hebrew (Israel)
• ka-GE Georgian (Georgia)
• ru-RU Russian (Russia)
• sv-SE Swedish (Sweden)

Themes

Built-in themes

• default: white theme
• dark: dark theme

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.

Name	Description
--tk-color-text	color of text button
--tk-background	color of background panel
--tk-background-button	color of background basic button
--tk-background-button-fn	color of background functional button
--tk-background-button-active	color of background active button

Layouts

Depends on attribute inputmode, the keyboard layout is changed.

inputmode	Screenshot
inputmode='text'
inputmode='search'
inputmode='email'
inputmode='url'
inputmode='numeric'
inputmode='decimal'
inputmode='tel'

Development

The most useful commands for development are:

• npm run start to start a development server
• npm run build-demo to build the demo locally (it will be published automatically by GitHub Actions)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

The MIT License (MIT)