-
Notifications
You must be signed in to change notification settings - Fork 1
/
section-04.html
150 lines (135 loc) · 5.02 KB
/
section-04.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="./main.css" rel="stylesheet">
</head>
<body>
<form>
<label for="input">Input</label>
<textarea id="input" rows="2"></textarea>
<div id="keyboard">
<button class="keyboard-key" type="button" data-char="あ">あ <span>(A)</span></button>
<button class="keyboard-key" type="button" data-char="い">い <span>(I)</span></button>
<button class="keyboard-key" type="button" data-char="う">う <span>(U)</span></button>
<button class="keyboard-key" type="button" data-char="え">え <span>(E)</span></button>
<button class="keyboard-key" type="button" data-char="お">お <span>(O)</span></button>
</div>
<button id="submit" type="button">Submit</button>
<hr>
<label>Output</label>
<pre id="output"></pre>
</form>
</body>
<script>
/*
We're organising all the keyboard logic into a single 'KeyboardApp'.
*/
class KeyboardApp {
constructor () {
// Let's register all the HTML elements to make them easier to access later.
this.html = {
input: document.getElementById('input'),
keyboard: document.getElementById('keyboard'),
submit: document.getElementById('submit'),
output: document.getElementById('output'),
}
// Let's register all the event handling
this.html.input.onkeypress = this.onKeyPress.bind(this)
this.html.submit.onclick = this.submit.bind(this)
this.setupKeyboard()
}
/*
This 'submit' logic is just placeholder for what you actually want to do.
Normally, this is where we'd submit the input data to a server. For our
example, we just print the text into the output field.
*/
submit () {
const text = input.value
output.innerText = text
}
/*
setupKeyboard() does exactly what it says on the tin.
*/
setupKeyboard () {
// In this version, we've hardcoded the keyboard keys into the HTML
const keyboardKeys = Array.from(document.getElementsByClassName('keyboard-key'))
// We're going through each <button#keyboard-key> and attaching a simple
// 'insert the character associated with this button' action.
keyboardKeys.forEach((keyboardKey) => {
const char = keyboardKey.dataset.char
keyboardKey.onclick = () => { this.insertChar(char) }
});
}
/*
insertChar() inserts a single character to the (end of the) input text box.
*/
insertChar (char) {
// Find the position of the "text cursor" on the text input
const startIndex = this.html.input.selectionStart
const endIndex = this.html.input.selectionEnd
// Minor trivia: if the text cursor has selected some text (e.g. a user
// highlighted a word) then startIndex will not be the same as endIndex ;
// otherwise, startIndex will be the same as endIndex.
// Insert the new character where the text cursor is, OR replace the text
// that the text cursor is selecting.
const text = this.html.input.value
const startText = text.substring(0, startIndex)
const endText = text.substring(endIndex)
this.html.input.value = startText + char + endText
// Return focus to the input text box, and reset the "text cursor" to the
// location where we just inserted the character
this.html.input.focus()
const focusIndex = startIndex + char.length
this.html.input.setSelectionRange(focusIndex, focusIndex)
}
/*
onKeyPress listens for keyboard input on the text input field.
*/
onKeyPress (keyboardEvent) {
// Get the key that the user just pressed
const code = keyboardEvent.code
// Note: there are different ways to get what the user typed into a text
// field.
// keyboardEvent.code corresponds to the PHYSICAL key on the keyboard.
// keyboardEvent.key corresponds to the TEXT VALUE of the key.
// If a user presses the 'A' key on a US-International QWERTY keyboard,
// we get code='KeyA', and key='a' (if shift/capslock is off) or key='A'
// (if shift/capslock is on)
// If the user presses the A, I, U, E, or O keys, then instead of
// inserting those English characters into the text, we insert the
// characters あ, い,う , え, or お
switch (code) {
case 'KeyA':
this.insertChar('あ')
return stopEvent(keyboardEvent)
case 'KeyI':
this.insertChar('い')
return stopEvent(keyboardEvent)
case 'KeyU':
this.insertChar('う')
return stopEvent(keyboardEvent)
case 'KeyE':
this.insertChar('え')
return stopEvent(keyboardEvent)
case 'KeyO':
this.insertChar('お')
return stopEvent(keyboardEvent)
}
return true
}
}
/*
Stops the default actions for an input event. For example, pressing the 'A' key
on a keyboard will insert the character 'a' into a text input field. If we want
to change the action so the 'A' key inserts the 'あ' character, we first need to
disable the default action.
*/
function stopEvent (e) {
e.preventDefault && e.preventDefault()
e.stopPropagation && e.stopPropagation()
return false
}
var app = new KeyboardApp() // Let's start the app!
</script>
</html>