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.

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

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.

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)