-
Notifications
You must be signed in to change notification settings - Fork 8
/
name_utils.html
77 lines (68 loc) · 2.06 KB
/
name_utils.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Name field utils</title>
<script src="name_utils.js"></script>
<style>
#message p {
color: lightgray;
}
#message p:first-child {
color: black;
}
</style>
</head>
<body>
<p>
<input type="text" id="fullname" name="fullname" placeholder="Full Name" autofocus>
<button id="testSplit">Split name</button>
</p>
<p>
<input type="text" id="given" name="given" placeholder="Given Name">
<input type="text" id="middle" name="middle" placeholder="Middle Name">
<input type="text" id="family" name="family" placeholder="Family Name">
<button id="testJoin">Join name parts</button>
</p>
<div id="message"></div>
<script>
let $ = id => document.getElementById(id);
function log() {
let message = Array.from(arguments).map(arg => {
if (typeof arg === "object") {
return JSON.stringify(arg);
}
return arg;
}).join(" ");
let p = document.createElement("p");
p.textContent = message;
$("message").insertBefore(p, $("message").firstChild);
console.log.apply(console, arguments);
}
$("testSplit").addEventListener("click", () => {
let fullname = $("fullname");
let nameParts = NameUtils.splitName(fullname.value);
fullname.focus();
log(fullname.value, "->", nameParts);
});
$("testJoin").addEventListener("click", () => {
let nameParts = {};
["given", "middle", "family"].forEach(id => nameParts[id] = $(id).value);
let fullName = NameUtils.joinNameParts(nameParts);
log(nameParts, "->", fullName);
$("given").focus();
});
let clickButton = evt => {
if (evt.keyCode == 13) {
evt.target.parentNode.querySelector("button").click();
evt.preventDefault();
}
};
["fullname", "given", "middle", "family"].forEach(id => {
let input = $(id);
input.addEventListener("keydown", clickButton);
input.addEventListener("focus", evt => evt.target.select());
});
</script>
</body>
</html>