Mobile-style Virtual Keyboard for Web Apps – teclado.js

teclado.js is a lightweight yet customizable virtual keyboard library that provides mobile-style on-screen keyboards for web applications.

Features:

• TypeScript support: Built with TypeScript for better development experience and type safety
• Framework integration: Works with React, Svelte, and vanilla JavaScript applications
• Customizable themes: Built-in light and dark themes with options for custom styling
• Multiple keyboard layouts: Includes default, numeric, numpad, symbol, and email-specific layouts
• Touch-friendly design: Optimized for mobile interaction patterns with proper button sizing
• Suggestion support: Built-in panel for displaying autocomplete suggestions
• Physical keyboard integration: Can work alongside or replace physical keyboard input

See it in action:

How to use it:

1. Install teclado.js and import it into your project.

# Yarn
$ yarn add teclado.js

# NPM
$ npm install teclado.js

# PNPM
$ pnpm install teclado.js

import { teclado } from 'teclado.js';

// OR from CDN
<script type="module">
import { teclado } from "https://cdn.jsdelivr.net/npm/teclado.js/teclado.min.js";
</script>

2. Initialize the keyboard.

var kb = teclado({
  // options here
});

3. Use the .on() method to connect it to your input fields and define the keyboard type:

• default: Standard QWERTY layout for general text input
• numeric: Number and symbol layout for numeric inputs
• numpad: Calculator-style number pad
• email: QWERTY layout with email-specific shortcuts (.com button)
• symbol: Extended symbols and special characters

<label for="name">First name:</label>
<input type="text" id="name" name="name" autocomplete="off" />

<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off" />

<label for="age">Age:</label>
<input type="number" id="age" name="age" autocomplete="off" />

<label for="password">Password:</label>
<input type="password" id="password" name="password" />

function start(id, keyboardType) {
  kb.on(id, {
    onChange: val => {
      document.getElementById(id).value = val;
    },
    keyboardType
  });
}
start('name');
start('email', 'default');
start('age', 'numpad');
start('password', 'symbol');

4. Available options.

• contentClass: A custom CSS class for the keyboard container.
• keyClass: A custom CSS class for individual keys.
• keySymbols: An object to override the text/icons for Backspace, Enter, Shift, and Tab.
• preset: A 2D array to define a completely custom keyboard layout.
• disablePhisicalKeyboard: A boolean to block native keyboard events.
• theme: Can be set to 'light' (default) or 'dark'.
• hidePanel: A boolean to hide the top panel that displays the current input value.
• suggestions: An array of strings to show as clickable suggestions in the panel.

var kb = teclado({
  contentClass?: string;
  keyClass?: string;
  keySymbols?: {
    Backspace?: string;
    Enter?: string;
    Shift?: string;
    Tab?: string;
  };
  preset?: KeyboardPreset;
  disablePhisicalKeyboard?: boolean;
  theme?: 'light' | 'dark';
  hidePanel?: boolean;
  suggestions?: string[];
});

5. For React, you’d initialize it inside a useEffect hook to ensure the DOM element exists.

import React from 'react';
import { teclado } from 'teclado.js';
const tcld = teclado();
export function MyComponent() {
  const [value, setValue] = React.useState('');
  React.useEffect(() => {
    tcld.on('inputId', {
      onChange: val => setValue(val || ''),
    });
  }, []); // Empty dependency array ensures this runs only once
  return (
    <input type='text' id='inputId' value={value} onChange={e => setValue(e.target.value)} />
  );
}

6. For Svelte, the logic is similar, using the onMount lifecycle function.

<script>
  import { onMount } from 'svelte';
  import { teclado } from 'teclado.js';
  const tcld = teclado();
  let inputValue = '';
  onMount(() => {
    tcld.on('inputId', {
      onChange: value => {
        inputValue = value || '';
      }
    });
  });
</script>
<input id="inputId" type="text" bind:value={inputValue} />

FAQs:

Q: Can I create a completely custom keyboard layout?
A: Yes. The preset option accepts a two-dimensional array of strings or objects. This lets you define the exact rows and keys, including their values and any character variants for long presses.

Q: How does the keyboard handle responsive design?
A: The keyboard’s UI is built with flexbox. It’s fixed to the bottom of the viewport with a width of 100%, so it naturally adapts to different screen sizes without any extra configuration.

Q: Does the library work with input validation libraries?
A: Yes, teclado.js triggers standard input change events, so it works perfectly with form validation libraries like Joi, Yup, or built-in HTML5 validation.

Related Resources:

• 10 Best JavaScript Libraries To Create Custom Keyboard Shortcuts
• 10 best Virtual keyboard Components In JavaScript

The post Mobile-style Virtual Keyboard for Web Apps – teclado.js appeared first on CSS Script.