On-screen Virtual keyboard/Keypad In JavaScript – A-Keyboard

Preview:

Description:

A-Keyboard is a small JavaScript library to create themeable virtual keyboard, keypad, mobile keyboard on the screen.

How to use it:

1. Load a theme CSS of your choice in the document. Built-in themes:

• Default
• Classic
• Dark
• Grass Green

<!-- Default -->
<link rel="stylesheet" href="./css/index.css">
<!-- Classic -->
<link rel="stylesheet" href="./css/index-classic.css">
<!-- Dark -->
<link rel="stylesheet" href="./css/index-dark.css">
<!-- Grass Green -->
<link rel="stylesheet" href="./css/index-grassGreen.css">

2. Import the A-Keyboard library into the document.

const keyboard = require('./keyboard'),
      numberKeyboard = require('./keyboard.number'),
      mobileKeyboard = require('./keyboard.mobile');
window.aKeyboard = {
  keyboard,
  numberKeyboard,
  mobileKeyboard
}

<script src="./index.js"></script>

3. Attach the keyboard to a text field you specify.

<textarea></textarea>
<div id="main"></div>

// keyboard
const keyboard = new aKeyboard.keyboard({
      el: '#main',
      style: {}, // additional styles
      fixedBottomCenter: true
});
keyboard.inputOn('#input', 'value');
// mobile keyboard
const keyboard = new aKeyboard.mobileKeyboard({
      el: '#main',
      style: {}, // additional styles
      fixedBottomCenter: true
});
keyboard.inputOn('#input', 'value');
// keypad
const keyboard = new aKeyboard.numberKeyboard({
      el: '#main',
      style: {}, // additional styles
      fixedBottomCenter: true
});
keyboard.inputOn('#input', 'value');

4. It also provides a functionality to override the default keypress event.

keyboard.onclick('Enter', function(){
  alert('Enter Event');
})

Previews:

A-Keyboard Normal

A-Keyboard Keypad

A-Keyboard Mobile