回答編集履歴
3
テキスト修正
answer
CHANGED
|
@@ -41,4 +41,17 @@
|
|
|
41
41
|
- **動作確認用CodePen:** [https://codepen.io/jun68ykt/pen/wvBqaQd?editors=1010](https://codepen.io/jun68ykt/pen/wvBqaQd?editors=1010)
|
|
42
42
|
|
|
43
43
|
|
|
44
|
-
- cdnjs: [lodash.js](https://cdnjs.com/libraries/lodash.js/)
|
|
44
|
+
- cdnjs: [lodash.js](https://cdnjs.com/libraries/lodash.js/)
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
### 追記2
|
|
48
|
+
|
|
49
|
+
私の上記回答のコードだと、以下の手順で再現されるような不便さがありまして、実用に耐えうるものになっていないです。
|
|
50
|
+
|
|
51
|
+
- input が空欄の状態から、1,2,3,4,5,6,7,8 と順に打つ。
|
|
52
|
+
- `4`の後ろにスペースが追加された `1234 5678` と表示される。
|
|
53
|
+
- `3` を別の数字に修正するために、`3` の後ろをクリックするか、矢印キーで、`3`の後ろにカーソルを移動させる。
|
|
54
|
+
- バックスペースを押す
|
|
55
|
+
- 表示が `1245 678` となり、かつ、カーソルが末尾（`8` の後ろ）に移動してしまう。
|
|
56
|
+
|
|
57
|
+
上記の手順で、バックスペースを押した後の望ましい状態は、`2`と`4`の間にカーソルがあることですが、そのようになりません。これをきちんと制御するには、input のカーソル位置取得、設定をきめ細かくやる必要がありそうです。
|
2
テキスト修正
answer
CHANGED
|
@@ -22,4 +22,23 @@
|
|
|
22
22
|
- 半角数字以外の文字（スペース含む。）が入力されても無視されます。
|
|
23
23
|
- 途中まで入力した値をバックスペースで消していくときに、自動で追加された区切りのスペースは、自動的に消去されます。(※スペースを消すためのバックスペースを打つ必要がない、という意味です。）
|
|
24
24
|
|
|
25
|
+
|
|
25
|
-
参考になれば幸いです。
|
|
26
|
+
参考になれば幸いです。
|
|
27
|
+
|
|
28
|
+
### 追記
|
|
29
|
+
上記の回答では、４桁ずつ区切るために正規表現を使いましたが、別の方法で区切るコードを挙げます。
|
|
30
|
+
|
|
31
|
+
「質問への追記・修正」のやりとりを拝読して、外部のモジュールも、場合によっては利用出来るということなのかなと思われました。以下は、 4桁ずつ区切るために、lodash の [_.chunk](https://lodash.com/docs/#chunk) を使ったコードです。
|
|
32
|
+
|
|
33
|
+
```javascript
|
|
34
|
+
document
|
|
35
|
+
.getElementById('card-number-input')
|
|
36
|
+
.addEventListener('input', function(e) {
|
|
37
|
+
const digits = e.target.value.replace(/[^0-9]/g, '');
|
|
38
|
+
e.target.value = _.chunk(digits, 4).map(a => a.join('')).join(' ');
|
|
39
|
+
});
|
|
40
|
+
```
|
|
41
|
+
- **動作確認用CodePen:** [https://codepen.io/jun68ykt/pen/wvBqaQd?editors=1010](https://codepen.io/jun68ykt/pen/wvBqaQd?editors=1010)
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
- cdnjs: [lodash.js](https://cdnjs.com/libraries/lodash.js/)
|
1
テキスト修正
answer
CHANGED
|
@@ -20,6 +20,6 @@
|
|
|
20
20
|
|
|
21
21
|
上記では、
|
|
22
22
|
- 半角数字以外の文字（スペース含む。）が入力されても無視されます。
|
|
23
|
-
- 途中まで入力した値をバックスペースで消していくときに、自動で追加された区切りのスペースは、自動的に消去されます。
|
|
23
|
+
- 途中まで入力した値をバックスペースで消していくときに、自動で追加された区切りのスペースは、自動的に消去されます。(※スペースを消すためのバックスペースを打つ必要がない、という意味です。）
|
|
24
24
|
|
|
25
25
|
参考になれば幸いです。
|