[AngularJS] Virtual Keyboard

Virtual kayboard/keypad via AngularJS.

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 ng-app="virtualKeypad">
<head>
  <meta charset="utf-8">
  <title>AngularJS 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" ng-model="paliWord"><br>
<div class="keypad">
    <div><input ng-click="addLtr(letter)" value="{{ letter }}" type="button" ng-repeat="letter in ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p']"></div>
    <div><input ng-click="addLtr(letter)" value="{{ letter }}" type="button" ng-repeat="letter in ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l']"></div>
    <div><input ng-click="addLtr(letter)" value="{{ letter }}" type="button" ng-repeat="letter in ['z', 'x', 'c', 'v', 'b', 'n', 'm']"></div>
    <div><input ng-click="addLtr(letter)" value="{{ letter }}" type="button" ng-repeat="letter in ['ā', 'ḍ', 'ī', 'ḷ', 'ṁ', 'ṃ', 'ñ', 'ṇ', 'ṭ', 'ū', 'ŋ', 'ṅ']"></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<script src="app.js"></script>
</body>
</html>

app.js | repository | view raw

'use strict';

angular.module('virtualKeypad', []).
  run(['$rootScope', function($rootScope) {
    $rootScope.addLtr = function(letter) {
      if (angular.isUndefined($rootScope.paliWord)) {
        $rootScope.paliWord = letter;
      } else {
        $rootScope.paliWord += letter;
      }
    };
}]);

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;
}

To make virtual keyboard draggable, see [2].

To make virtual keyboard toggle-able, see [3].

For Vue.js version, see [4].
For plain JavaScript version, see [5].
For Dart version, see [6].
For GopherJS version, see [7].

Tested on:

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

References:

[1]	pali/input.html at master · siongui/pali · GitHub pali/inputSuggest.js at master · siongui/pali · GitHub

[2]	[AngularJS] Draggable (Movable) Element

[3]	[AngularJS] Toggle Element without JavaScript

[4]	[Vue.js] Virtual Keyboard

[5]	[JavaScript] Virtual Keyboard

[6]	[Dart] Virtual Keyboard

[7]	[GopherJS] Virtual Keyboard