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

Category: Javascript , Recommended | October 24, 2019
Author: 18510047382
Views Total: 434 views
Official Page: Go to website
Last Update: October 24, 2019
License: MIT

Preview:

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

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 Normal

A-Keyboard Keypad

A-Keyboard Keypad

A-Keyboard Mobile

A-Keyboard Mobile

You Might Be Interested In:


Leave a Reply