2

[JavaScript] Virtual Keyboard

 2 years ago
source link: http://siongui.github.io/2017/01/28/javascript-virtual-keypad/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

[JavaScript] Virtual Keyboard

January 28, 2017

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:

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:


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK