/
example.html
54 lines (48 loc) · 1.76 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
<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: IMask.MaskedEnum,
enum: Array.from({ length: 12 }, (_, i) =>
new Date(0, i).toLocaleString(window.navigator.language, { month: 'long' })
),
lazy: false,
matchValue: (estr, istr, matchFrom) => IMask.MaskedEnum.DEFAULTS.matchValue(estr.toLowerCase(), istr.toLowerCase(), matchFrom),
};
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>