|
1 | 1 | ```html |
2 | | -<ion-list> |
3 | | - <ion-item> |
4 | | - <ion-input id="card" label="Card number" placeholder="0000 0000 0000 0000"></ion-input> |
5 | | - </ion-item> |
6 | | - <ion-item> |
7 | | - <ion-input id="phone" label="US Phone number" placeholder="+1 (xxx) xxx-xxxx"></ion-input> |
8 | | - </ion-item> |
9 | | -</ion-list> |
| 2 | +<html> |
| 3 | + <head> |
| 4 | + <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/core.css" /> |
| 5 | + <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/ionic.bundle.css" /> |
| 6 | + </head> |
10 | 7 |
|
11 | | -<script> |
12 | | - async function initPhoneMask() { |
13 | | - const ionInput = document.querySelector('#phone'); |
14 | | - const nativeEl = await ionInput.getInputElement(); |
| 8 | + <body> |
| 9 | + <ion-app> |
| 10 | + <ion-list> |
| 11 | + <ion-item> |
| 12 | + <ion-input id="card" label="Card number" placeholder="0000 0000 0000 0000"></ion-input> |
| 13 | + </ion-item> |
| 14 | + <ion-item> |
| 15 | + <ion-input id="phone" label="US Phone number" placeholder="+1 (xxx) xxx-xxxx"></ion-input> |
| 16 | + </ion-item> |
| 17 | + </ion-list> |
15 | 18 |
|
16 | | - new window.Maskito(nativeEl, { |
17 | | - mask: ['+', '1', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/], |
18 | | - }); |
19 | | - } |
| 19 | + <script> |
| 20 | + async function initPhoneMask() { |
| 21 | + const ionInput = document.querySelector('#phone'); |
| 22 | + const nativeEl = await ionInput.getInputElement(); |
20 | 23 |
|
21 | | - async function initCardMask() { |
22 | | - const ionInput = document.querySelector('#card'); |
23 | | - const nativeEl = await ionInput.getInputElement(); |
| 24 | + new window.Maskito(nativeEl, { |
| 25 | + mask: ['+', '1', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/], |
| 26 | + }); |
| 27 | + } |
24 | 28 |
|
25 | | - new window.Maskito(nativeEl, { |
26 | | - mask: [ |
27 | | - ...Array(4).fill(/\d/), |
28 | | - ' ', |
29 | | - ...Array(4).fill(/\d/), |
30 | | - ' ', |
31 | | - ...Array(4).fill(/\d/), |
32 | | - ' ', |
33 | | - ...Array(4).fill(/\d/), |
34 | | - ' ', |
35 | | - ...Array(4).fill(/\d/), |
36 | | - ], |
37 | | - }); |
38 | | - } |
| 29 | + async function initCardMask() { |
| 30 | + const ionInput = document.querySelector('#card'); |
| 31 | + const nativeEl = await ionInput.getInputElement(); |
39 | 32 |
|
40 | | - window.addEventListener('appload', () => { |
41 | | - initCardMask(); |
42 | | - initPhoneMask(); |
43 | | - }); |
44 | | -</script> |
| 33 | + new window.Maskito(nativeEl, { |
| 34 | + mask: [ |
| 35 | + ...Array(4).fill(/\d/), |
| 36 | + ' ', |
| 37 | + ...Array(4).fill(/\d/), |
| 38 | + ' ', |
| 39 | + ...Array(4).fill(/\d/), |
| 40 | + ' ', |
| 41 | + ...Array(4).fill(/\d/), |
| 42 | + ' ', |
| 43 | + ...Array(4).fill(/\d/), |
| 44 | + ], |
| 45 | + }); |
| 46 | + } |
| 47 | +
|
| 48 | + window.addEventListener('appload', () => { |
| 49 | + initCardMask(); |
| 50 | + initPhoneMask(); |
| 51 | + }); |
| 52 | + </script> |
| 53 | + </ion-app> |
| 54 | + </body> |
| 55 | +</html> |
45 | 56 | ``` |
0 commit comments