[Dart] Virtual Keyboard

Virtual kayboard/keypad in Dart programming language.

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 Dart 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.dart | repository | view raw

import 'dart:html';

void main() {
  InputElement word = querySelector("#userinput");
  Element keypad = querySelector(".keypad");
  var 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 = new Element.tag('div');
    for (var i = 0; i < letters[row].length; i++) {
      var inputElm = new InputElement();
      inputElm.type = 'button';
      inputElm.value = letters[row][i];
      inputElm.onClick.listen((e) => word.value += e.target.value);
      divElm.children.add(inputElm);
    }
    keypad.children.add(divElm);
  }
}

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 [1].
For Vue.js version, see [2].
For plain JavaScript version, see [3].
For GopherJS version, see [4].

Tested on: DartPad.

References:

[1]	[AngularJS] Virtual Keyboard

[2]	[Vue.js] Virtual Keyboard

[3]	[JavaScript] Virtual Keyboard

[4]	[GopherJS] Virtual Keyboard