[Vue.js] Virtual Keyboard

Virtual kayboard/keypad via Vue.js.

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>Vue.js 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>

<div id="container">
  <input type="text" v-model="paliWord"><br>
  <div class="keypad">
    <div><input @click="paliWord += letter" :value="letter" type="button" v-for="letter in row1letters"></div>
    <div><input @click="paliWord += letter" :value="letter" type="button" v-for="letter in row2letters"></div>
    <div><input @click="paliWord += letter" :value="letter" type="button" v-for="letter in row3letters"></div>
    <div><input @click="paliWord += letter" :value="letter" type="button" v-for="letter in row4letters"></div>
  </div>
</div>

<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<script src="app.js"></script>
</body>
</html>

app.js | repository | view raw

'use strict';

var ct = new Vue({
  el: '#container',
  data: {
    paliWord: '',
    row1letters: ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
    row2letters: ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],
    row3letters: ['z', 'x', 'c', 'v', 'b', 'n', 'm'],
    row4letters: ['ā', 'ḍ', 'ī', 'ḷ', 'ṁ', 'ṃ', 'ñ', 'ṇ', 'ṭ', 'ū', 'ŋ', 'ṅ'],
  }
})

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

Tested on:

Chromium Version 55.0.2883.87 Built on Ubuntu , running on Ubuntu 16.10 (64-bit)
Vue.js 2.1.10.

References:

[1]	[AngularJS] Virtual Keyboard

[2]	[JavaScript] Virtual Keyboard

[3]	[Dart] Virtual Keyboard

[4]	[GopherJS] Virtual Keyboard