teratail
回答率
85.39%
teratail 10th-anniversary
teratail 10th-anniversary
質問するログイン新規登録
トップに関する質問jQuery（またはJavaScript）でリアルタイムに数字を3桁ずつカンマで区切りたい

編集履歴

質問編集履歴

3

質問内容を整理しました。

2018/08/30 08:57

投稿

no1knows
no1knows

スコア3365

test CHANGED
File without changes
test CHANGED
@@ -1,92 +1,12 @@
1
- ### 前提・実現したいこと
1
+ ### 実現したいこと
2
2
 
3
3
 
4
4
 
5
- 数字の追加・削除する際に、リアルタイムに数字を3桁ずつスムーズにカンマで区切りたいです。
5
+ 数字の入力・削除する際に、リアルタイムに数字を3桁ずつスムーズにカンマで区切りたいです。
6
6
 
7
7
 
8
8
 
9
- 具体的には、下記の①と④をみたしたものを実現したいです。
10
-
11
-
12
-
13
- ### 問題が発生するまでの流れ・手順
14
-
15
-
16
-
17
- 【jQueryのkeyupを利用】
18
-
19
-
20
-
21
- 　① きちんと3桁ずつカンマが挿入される。
22
-
23
- 　② 入力時に、数字が揺れているような状態になってしまう。（数字表示→カンマ追加の順になっている？？）
24
-
25
-
26
-
27
- 【jQueryのkeydownを利用】
28
-
29
-
30
-
31
- 　③ 3桁ずつカンマが挿入されない。*
32
-
33
- 　④ 入力はスムーズで期待したとおり。
34
-
35
-
36
-
37
- *追加するときは、3桁・3桁・4桁になる。　　123,456,7890
38
-
39
- *削除するときは、3桁・3桁・2桁になる。　　12,345,678,90
40
-
41
-
42
-
43
-
44
-
45
- ### ソースコード
46
-
47
- 下記にて動作確認しました。
9
+ こちらが実現したい動作となります。
48
-
49
-
50
-
51
- ```html
52
-
53
- <input type="tel" class="input-num">
54
-
55
-
56
-
57
- ```
58
-
59
- ```jQuery
60
-
61
- $('.input-num').keydown(function () {
62
-
63
- var num = $(this).val();
64
-
65
- //console.log(num);
66
-
67
- num = num.replace(/,/g, '');
68
-
69
- num = num.replace(/(\d)(?=(\d\d\d)+$)/g, '$1,');
70
-
71
- $(this).val(num);
72
-
73
-
74
-
75
- });
76
-
77
-
78
-
79
- ```
80
-
81
-
82
-
83
-
84
-
85
- ### 【追記①】期待する動作
86
-
87
-
88
-
89
- 質問をいただきましたので期待する動作を追記させていただきます。
90
10
 
91
11
 
92
12
 
@@ -94,48 +14,96 @@
94
14
 
95
15
 
96
16
 
97
- こちらのようにカンマの場所が変わらず、また左右のボタンをおして動かしてもカンマを飛ばすようなものが理想です。
17
+ ### 前提条件
98
18
 
99
19
 
100
20
 
101
- ### 【追記②】前提条件
21
+ 金額の入力欄なので、入力文字は半角の数字のみとなります。
102
22
 
103
23
 
104
24
 
105
- 作りたいものは金額の入力欄で基本的に数字以外の入力はありません。
25
+ ### 期待する動作の詳細条件
106
26
 
107
27
 
108
28
 
109
- ### 【追記③】詳細な動作
110
-
111
- 1.数字以外は入力不可。
112
-
113
- 　→数字以外の文字はカーソルが外れた段階で自動的に削除されます
29
+ 1．数字を入力/削除すると、数字を3桁ずつカンマ区切りできる。
114
30
 
115
31
 
116
32
 
117
- 2.全角の数字は、半角の数字に自動変換。
33
+ 2．カーソルを矢印キーで移動した場合、カンマの部分は自動的に飛ばされます。
34
+
35
+ →カーソル文字分はスキップされるため、カーソルを気にしない入力ができるようになっています。（GIFでも確認できるかと思います。）
118
36
 
119
37
 
120
38
 
121
- 3.GIFにもあるのですが、横ボタンを押すとカンマは飛ばされます。
39
+ ### これまでにわかったこと
122
-
123
- 　→なのでカーソル文字分はスキップされるため、カーソルを気にしない入力ができるようになっています。
124
40
 
125
41
 
126
42
 
43
+ jQueryを利用してkeydownやkeyupのあとreplaceで実装すると、期待したスムーズな入力になりませんでした。
44
+
45
+ [http://kwski.net/jquery/1074/](http://kwski.net/jquery/1074/)
46
+
47
+
48
+
49
+ 3桁ずつカンマで区切る際の動きをよくよく見てみると下記のような違いがあるようです。
50
+
51
+
52
+
53
+ **● 参考サイトの場合 ●**
54
+
55
+
56
+
57
+ 【文字を入力】→【ブラウザ上に文字が表示】→【その情報を取得】→【3桁ずつカンマを入れる】→【ブラウザ上の文字を入れ替える】
58
+
59
+
60
+
61
+ **● 期待する動き ●**
62
+
63
+
64
+
65
+ 【文字を入力】→【その情報を取得】→【3桁ずつカンマを入れる】→【ブラウザ上に文字を表示する】
66
+
67
+
68
+
69
+
70
+
71
+
72
+
73
+ ### その他のあとから追加する機能（参考）
74
+
75
+ ※質問いただいたため記載しておきます。
76
+
77
+
78
+
79
+ 1．数字以外は入力不可。
80
+
81
+ 　→数字以外の文字はカーソルが外れた段階で自動的に削除されます。
82
+
83
+
84
+
85
+ 2．全角の数字は、半角の数字に自動変換。
86
+
87
+
88
+
127
- 4.数字の貼り付けは見落としていたのですが、動作を確認したところ、カーソルが外れた段階でカンマが挿入されました。
89
+ 3．数字の貼り付けは見落としていたのですが、動作を確認したところ、カーソルが外れた段階でカンマが挿入されました。
90
+
91
+
128
92
 
129
93
 
130
94
 
131
95
  ###
132
96
 
133
- 前提条件を記載していなかったので、景観重視と誤解をさせてしまっているのだと思います。
97
+ 前提条件などを記載していなかったので、みなさまのお手数をとらせてしまいました。申し訳ありません。
134
98
 
135
- お手数をとらせてしまい申し訳ありません。
99
+ 頂いた質問などを整理して質問内容を修正いたしました。
136
100
 
137
101
 
138
102
 
139
103
  皆様の回答から、一般的な実装ではないのかと思いますが、用途を絞ると非常に使いやすいと感じています。
140
104
 
141
105
  （このGIFの入力欄を使ったサービスは数千社が利用していることから、ある程度使いやすいシステムに最適化されていると考えています。）
106
+
107
+
108
+
109
+ 引き続きどうぞよろしくお願いいたします。

2

前提条件と詳細な動作、お詫びを追加しました。

2018/08/30 08:57

投稿

no1knows
no1knows

スコア3365

test CHANGED
File without changes
test CHANGED
@@ -82,7 +82,7 @@
82
82
 
83
83
 
84
84
 
85
- ### 【追記】期待する動作
85
+ ### 【追記①】期待する動作
86
86
 
87
87
 
88
88
 
@@ -95,3 +95,47 @@
95
95
 
96
96
 
97
97
  こちらのようにカンマの場所が変わらず、また左右のボタンをおして動かしてもカンマを飛ばすようなものが理想です。
98
+
99
+
100
+
101
+ ### 【追記②】前提条件
102
+
103
+
104
+
105
+ 作りたいものは金額の入力欄で基本的に数字以外の入力はありません。
106
+
107
+
108
+
109
+ ### 【追記③】詳細な動作
110
+
111
+ 1.数字以外は入力不可。
112
+
113
+ 　→数字以外の文字はカーソルが外れた段階で自動的に削除されます
114
+
115
+
116
+
117
+ 2.全角の数字は、半角の数字に自動変換。
118
+
119
+
120
+
121
+ 3.GIFにもあるのですが、横ボタンを押すとカンマは飛ばされます。
122
+
123
+ 　→なのでカーソル文字分はスキップされるため、カーソルを気にしない入力ができるようになっています。
124
+
125
+
126
+
127
+ 4.数字の貼り付けは見落としていたのですが、動作を確認したところ、カーソルが外れた段階でカンマが挿入されました。
128
+
129
+
130
+
131
+ ###
132
+
133
+ 前提条件を記載していなかったので、景観重視と誤解をさせてしまっているのだと思います。
134
+
135
+ お手数をとらせてしまい申し訳ありません。
136
+
137
+
138
+
139
+ 皆様の回答から、一般的な実装ではないのかと思いますが、用途を絞ると非常に使いやすいと感じています。
140
+
141
+ （このGIFの入力欄を使ったサービスは数千社が利用していることから、ある程度使いやすいシステムに最適化されていると考えています。）

1

期待する動作がわかるようにGIF動画を追記

2018/08/30 07:11

投稿

no1knows
no1knows

スコア3365

test CHANGED
File without changes
test CHANGED
@@ -77,3 +77,21 @@
77
77
 
78
78
 
79
79
  ```
80
+
81
+
82
+
83
+
84
+
85
+ ### 【追記】期待する動作
86
+
87
+
88
+
89
+ 質問をいただきましたので期待する動作を追記させていただきます。
90
+
91
+
92
+
93
+ ![イメージ説明](e29e6cc1a54aa2fa7aee71cab74c3e09.gif)
94
+
95
+
96
+
97
+ こちらのようにカンマの場所が変わらず、また左右のボタンをおして動かしてもカンマを飛ばすようなものが理想です。