Angular Touch Keyboard

A mobile-friendly virtual keyboard for Angular inputs, textareas, and editable divs.

Features

• Works with input, textarea, and div elements.
• Automatic layout selection from inputmode (text, email, url, numeric, decimal, tel).
• Built-in locales: en-US, en-GB, fa-IR, he-IL, ka-GE, po-OS, ru-RU, sv-SE.
• Full-screen mode for kiosk/tablet experiences.
• Outside-click handling that avoids duplicate accept/close flows.
• Optional native keyboard suppression for touch devices.

Install

npm install angular-touch-keyboard

Quick Start

1. Import the module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AngularTouchKeyboardModule } from 'angular-touch-keyboard';

import { AppComponent } from './app.component';

@NgModule({
	declarations: [AppComponent],
	imports: [BrowserModule, FormsModule, AngularTouchKeyboardModule],
	bootstrap: [AppComponent],
})
export class AppModule {}

2. Use the directive on an input:

<input
	type="text"
	inputmode="text"
	angularTouchKeyboard="en-US"
	placeholder="Tap to open keyboard"
/>

Usage Examples

Numeric keypad

<input
	type="text"
	inputmode="numeric"
	angularTouchKeyboard="en-US"
	placeholder="PIN"
/>

Decimal keypad with custom initial layout

<input
	type="text"
	inputmode="decimal"
	angularTouchKeyboard="po-OS"
	ngxLayoutName="minus"
	placeholder="Amount"
/>

Open with a button

<input
	#keyboard="angularTouchKeyboard"
	type="text"
	inputmode="text"
	angularTouchKeyboard="en-US"
	[ngxTouchKeyboardOpenWithButton]="true"
/>

<button type="button" (click)="keyboard.togglePanel()">Open Keyboard</button>

Validate input before accept

<input
	type="text"
	inputmode="numeric"
	angularTouchKeyboard="en-US"
	[validate]="allowOnlyPositiveIntegers"
	(acceptClick)="onAccept($event)"
/>

allowOnlyPositiveIntegers = (value?: string): boolean =>
	!!value && /^\d+$/.test(value);

onAccept(): void {
	// Handle accepted value here
}

Add A Custom Keyboard Layout

You can extend a built-in locale at runtime and point ngxLayoutName to your new layout.

import { Component } from '@angular/core';
import {
	AngularTouchKeyboardLocales,
	AngularTouchKeyboardLocale,
} from 'angular-touch-keyboard';

@Component({
	selector: 'app-demo',
	template: `
		<input
			type="text"
			inputmode="text"
			angularTouchKeyboard="en-US"
			ngxLayoutName="finance"
			placeholder="Finance layout"
		/>
	`,
})
export class DemoComponent {
	constructor() {
		const locale = AngularTouchKeyboardLocales.enUS as AngularTouchKeyboardLocale;

		locale.layouts['text_finance'] = [
			['1', '2', '3', '4', '5'],
			['6', '7', '8', '9', '0'],
			['+', '-', '*', '/', '{backspace}'],
			['(', ')', '.', ',', '{done}'],
		];

		locale.display['{done}'] = 'Apply';
	}
}

Notes:

• For inputmode="text", the layout key format is text_<layoutName>.
• For inputmode="numeric", use numeric_<layoutName>.
• Functional keys are wrapped with braces (example: {backspace}, {done}).

Directive Inputs

| Input | Type | Default | Description | |---|---|---|---| | angularTouchKeyboard | string | '' | Locale code (example: en-US). | | ngxLayoutName | string | 'alphabetic' | Initial layout name (without mode prefix). | | ngxTouchKeyboardDiv | boolean | auto | Enables editable div mode. | | ngxTouchKeyboardOpenWithButton | boolean | false | Prevents auto-open on focus. | | ngxTouchKeyboardDebug | boolean | false | Logs keyboard internals. | | ngxTouchKeyboardFullScreen | boolean | false | Opens keyboard in full-screen mode. | | ngxTouchKeyboardOutsideClick | boolean | true | Controls outside click accept/close behavior. | | ngxTouchKeyboardSuppressSystemKeyboard | boolean | false | Tries to suppress native soft keyboard on touch devices. | | ngxTouchKeyboardPreventSystemKeyboard | boolean | false | Alias of ngxTouchKeyboardSuppressSystemKeyboard. | | validate | (value?: string) => boolean | undefined | Optional validation before accept. |

Events

| Output | Payload | Description | |---|---|---| | acceptClick | AngularTouchKeyboardComponent | Fired when value is accepted. |

Build And Publish

ng build angular-touch-keyboard
cd dist/angular-touch-keyboard
npm publish