[JavaScript] Virtual Keyboard

Virtual kayboard/keypad in vanilla JavaScript [1] (plain JavaScript without any additional library/framework like jQuery, Vue.js, or AngularJS).

Demo (JSFiddle)

Real world application is Pāli Dictionary. There are special characters in romanized Pāli. For the convenience of input Pāli words, users can use the virtual keyboard to type Pāli word without installation of Pāli input method in computers

Source code:

index.html | repository | view raw

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>JavaScript Virtual Keypad Demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="keypad.css">
</head>
<body>

<input type="text" id="userinput"><br>
<div class="keypad"></div>

<script src="app.js"></script>
</body>
</html>

The logic in JavaScript code is simple:

Create input element for each letter in Pāli alphabet.
- type of the input element is button.
- value of the input element is the Pāli letter.
Listen to click event of the input element. In the callback of click event, add the corresponding Pāli letter to the user input.

app.js | repository | view raw

'use strict';

function createKeypad() {
  var word = document.querySelector("#userinput");
  var keypad = document.querySelector(".keypad");

  const letters = [ ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
                    ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],
                    ['z', 'x', 'c', 'v', 'b', 'n', 'm'],
                    ['ā', 'ḍ', 'ī', 'ḷ', 'ṁ', 'ṃ', 'ñ', 'ṇ', 'ṭ', 'ū', 'ŋ', 'ṅ'] ];

  for (var row = 0; row < letters.length; row++) {
    var divElm = document.createElement("div");
    for (var i = 0; i < letters[row].length; i++) {
      var inputElm = document.createElement("input");
      inputElm.type = "button";
      inputElm.value = letters[row][i];
      divElm.appendChild(inputElm);
      inputElm.addEventListener("click", function(e) {
        word.value += e.target.value;
      }, false);
    }
    keypad.appendChild(divElm);
  }
}

createKeypad();

keypad.css | repository | view raw

.keypad {
  position: absolute;
  border: 1px solid #ccc;
  padding: 10px;
  cursor: move;
  z-index: 21;
  text-align: center;
  background-color: #F0F8FF;
}

.keypad > div {
  display: block;
}

For AngularJS version, see [3].
For Vue.js version, see [4].
For Dart version, see [5].
For GopherJS version, see [6].

Tested on:

Chromium Version 55.0.2883.87 Built on Ubuntu , running on Ubuntu 16.10 (64-bit)

References:

[1]	javascript - What is VanillaJS? - Stack Overflow

[2]	javascript main - Google search javascript main - DuckDuckGo search javascript main - Bing search javascript main - Yahoo search javascript main - Baidu search javascript main - Yandex search Why doesn't JavaScript need a main() function? - Stack Overflow

[3]	[AngularJS] Virtual Keyboard

[4]	[Vue.js] Virtual Keyboard

[5]	[Dart] Virtual Keyboard

[6]	[GopherJS] Virtual Keyboard