-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
106 lines (91 loc) · 2.41 KB
/
index.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
<html>
<head>
</head>
<body>
<style>
#error {
color: red;
}
.hidden {
display: none;
}
</style>
<input>
<div id="container">
<ul>
<li>
<input type="checkbox" id="none">
<label for="none">no focus()</label>
</li>
<li>
<input type="checkbox" id="click">
<label for="click">onclick focus()</label>
</li>
</ul>
<p id="error" class="hidden">At least one checkbox needs to be checked!</p>
</div>
<input>
<script>
var none = document.querySelector('#none');
var click = document.querySelector('#click');
var container = document.querySelector('#container');
var error = document.querySelector('#error');
click.addEventListener('click', function (e) {
console.log('onclick: "click"');
click.focus();
});
var containsFocus = false;
var focusHandler = function (e) {
error.classList.add('hidden');
containsFocus = true;
};
var blurHandler = function (e) {
containsFocus = false;
setTimeout(function () {
if (!containsFocus) {
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
var checked = Array.prototype.slice.apply(checkboxes)
.some(function (checkbox) {
return checkbox.checked;
});
if (!checked) {
error.classList.remove('hidden');
}
}
}, 0);
};
[none, click].forEach(function (checkbox) {
checkbox.addEventListener('focus', focusHandler);
checkbox.addEventListener('blur', blurHandler);
});
// Everything below here is just plain console logging
none.addEventListener('click', function (e) {
console.log('none: "click"');
});
none.addEventListener('focus', function (e) {
console.log('none: "focus"');
});
none.addEventListener('focusin', function (e) {
console.log('none: "focusin"');
});
none.addEventListener('focusout', function (e) {
console.log('none: "focusout"');
});
click.addEventListener('focus', function (e) {
console.log('onclick: "focus"');
});
click.addEventListener('focusin', function (e) {
console.log('onclick: "focusin"');
});
click.addEventListener('focusout', function (e) {
console.log('onclick: "focusout"');
});
container.addEventListener('focusin', function (e) {
console.log('container: "focusin"');
});
container.addEventListener('focusout', function (e) {
console.log('container: "focusout"');
});
</script>
</body>
</html>