/
example.html
67 lines (58 loc) · 1.78 KB
/
example.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
<html>
<head></head>
<body>
<h1>IMask Core Demo</h1>
<input type="text" id="input">
<div>value: <span id="value"></span></div>
<div>unmasked: <span id="unmasked"></span></div>
<div contenteditable="true" id="ce"></div>
<script src="dist/imask.js"></script>
<!-- <script src="https://unpkg.com/imask"></script> -->
<script type="text/javascript">
const opts = {
mask: 'VLv\\alue MM',
lazy: false, // make placeholder always visible
blocks: {
YY: {
mask: '00',
},
VL: {
mask: IMask.MaskedEnum,
enum: ['TV', 'HD', 'VR'],
},
MM: {
mask: IMask.MaskedRange,
from: 1,
to: 12,
},
},
};
const input = document.getElementById('input');
var result = document.getElementById('value');
var unmasked = document.getElementById('unmasked');
var imask = IMask(input, opts).on('accept', () => {
console.log('accept', imask.value, imask.unmaskedValue, imask.typedValue);
result.innerHTML = imask.value;
unmasked.innerHTML = imask.unmaskedValue;
});
// document.getElementById('input').addEventListener('focus', () => {
// imask.updateOptions({
// mask: mask.map((m) => ({
// ...m,
// lazy: false,
// })),
// });
// });
// document.getElementById('input').addEventListener('blur', () => {
// imask.updateOptions({
// mask: mask.map((m) => ({
// ...m,
// lazy: true,
// })),
// });
// });
// document.getElementById('input').addEventListener('blur', () => imask.updateOptions({lazy: true}));
// document.getElementById('input').addEventListener('focus', () => imask.updateOptions({lazy: false}));
</script>
</body>
</html>