回答編集履歴
3
テキスト修正
test
CHANGED
|
@@ -85,3 +85,29 @@
|
|
|
85
85
|
|
|
86
86
|
|
|
87
87
|
- cdnjs: [lodash.js](https://cdnjs.com/libraries/lodash.js/)
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+
### 追記2
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
私の上記回答のコードだと、以下の手順で再現されるような不便さがありまして、実用に耐えうるものになっていないです。
|
|
98
|
+
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
- input が空欄の状態から、1,2,3,4,5,6,7,8 と順に打つ。
|
|
102
|
+
|
|
103
|
+
- `4`の後ろにスペースが追加された `1234 5678` と表示される。
|
|
104
|
+
|
|
105
|
+
- `3` を別の数字に修正するために、`3` の後ろをクリックするか、矢印キーで、`3`の後ろにカーソルを移動させる。
|
|
106
|
+
|
|
107
|
+
- バックスペースを押す
|
|
108
|
+
|
|
109
|
+
- 表示が `1245 678` となり、かつ、カーソルが末尾（`8` の後ろ）に移動してしまう。
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
上記の手順で、バックスペースを押した後の望ましい状態は、`2`と`4`の間にカーソルがあることですが、そのようになりません。これをきちんと制御するには、input のカーソル位置取得、設定をきめ細かくやる必要がありそうです。
|
2
テキスト修正
test
CHANGED
|
@@ -46,4 +46,42 @@
|
|
|
46
46
|
|
|
47
47
|
|
|
48
48
|
|
|
49
|
+
|
|
50
|
+
|
|
49
51
|
参考になれば幸いです。
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
### 追記
|
|
56
|
+
|
|
57
|
+
上記の回答では、４桁ずつ区切るために正規表現を使いましたが、別の方法で区切るコードを挙げます。
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
「質問への追記・修正」のやりとりを拝読して、外部のモジュールも、場合によっては利用出来るということなのかなと思われました。以下は、 4桁ずつ区切るために、lodash の [_.chunk](https://lodash.com/docs/#chunk) を使ったコードです。
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
```javascript
|
|
66
|
+
|
|
67
|
+
document
|
|
68
|
+
|
|
69
|
+
.getElementById('card-number-input')
|
|
70
|
+
|
|
71
|
+
.addEventListener('input', function(e) {
|
|
72
|
+
|
|
73
|
+
const digits = e.target.value.replace(/[^0-9]/g, '');
|
|
74
|
+
|
|
75
|
+
e.target.value = _.chunk(digits, 4).map(a => a.join('')).join(' ');
|
|
76
|
+
|
|
77
|
+
});
|
|
78
|
+
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
- **動作確認用CodePen:** [https://codepen.io/jun68ykt/pen/wvBqaQd?editors=1010](https://codepen.io/jun68ykt/pen/wvBqaQd?editors=1010)
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
- cdnjs: [lodash.js](https://cdnjs.com/libraries/lodash.js/)
|
1
テキスト修正
test
CHANGED
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
|
|
43
43
|
- 半角数字以外の文字（スペース含む。）が入力されても無視されます。
|
|
44
44
|
|
|
45
|
-
- 途中まで入力した値をバックスペースで消していくときに、自動で追加された区切りのスペースは、自動的に消去されます。
|
|
45
|
+
- 途中まで入力した値をバックスペースで消していくときに、自動で追加された区切りのスペースは、自動的に消去されます。(※スペースを消すためのバックスペースを打つ必要がない、という意味です。）
|
|
46
46
|
|
|
47
47
|
|
|
48
48
|
|