質問編集履歴
3
質問内容を整理しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,71 +1,55 @@
|
|
|
1
|
-
###
|
|
1
|
+
### 実現したいこと
|
|
2
2
|
|
|
3
|
-
数字の
|
|
3
|
+
数字の入力・削除する際に、リアルタイムに数字を3桁ずつスムーズにカンマで区切りたいです。
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
こちらが実現したい動作となります。
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
### 前提条件
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
金額の入力欄なので、入力文字は半角の数字のみとなります。
|
|
12
|
-
② 入力時に、数字が揺れているような状態になってしまう。（数字表示→カンマ追加の順になっている？？）
|
|
13
12
|
|
|
14
|
-
|
|
13
|
+
### 期待する動作の詳細条件
|
|
15
14
|
|
|
16
|
-
|
|
15
|
+
1．数字を入力/削除すると、数字を3桁ずつカンマ区切りできる。
|
|
17
|
-
④ 入力はスムーズで期待したとおり。
|
|
18
16
|
|
|
19
|
-
*追加するときは、3桁・3桁・4桁になる。 123,456,7890
|
|
20
|
-
|
|
17
|
+
2．カーソルを矢印キーで移動した場合、カンマの部分は自動的に飛ばされます。
|
|
18
|
+
→カーソル文字分はスキップされるため、カーソルを気にしない入力ができるようになっています。（GIFでも確認できるかと思います。）
|
|
21
19
|
|
|
20
|
+
### これまでにわかったこと
|
|
22
21
|
|
|
23
|
-
### ソースコード
|
|
24
|
-
|
|
22
|
+
jQueryを利用してkeydownやkeyupのあとreplaceで実装すると、期待したスムーズな入力になりませんでした。
|
|
23
|
+
[http://kwski.net/jquery/1074/](http://kwski.net/jquery/1074/)
|
|
25
24
|
|
|
26
|
-
```html
|
|
27
|
-
|
|
25
|
+
3桁ずつカンマで区切る際の動きをよくよく見てみると下記のような違いがあるようです。
|
|
28
26
|
|
|
29
|
-
```
|
|
30
|
-
```jQuery
|
|
31
|
-
$('.input-num').keydown(function () {
|
|
32
|
-
var num = $(this).val();
|
|
33
|
-
//console.log(num);
|
|
34
|
-
num = num.replace(/,/g, '');
|
|
35
|
-
num = num.replace(/(\d)(?=(\d\d\d)+$)/g, '$1,');
|
|
36
|
-
|
|
27
|
+
**● 参考サイトの場合 ●**
|
|
37
28
|
|
|
38
|
-
|
|
29
|
+
【文字を入力】→【ブラウザ上に文字が表示】→【その情報を取得】→【3桁ずつカンマを入れる】→【ブラウザ上の文字を入れ替える】
|
|
39
30
|
|
|
40
|
-
|
|
31
|
+
**● 期待する動き ●**
|
|
41
32
|
|
|
33
|
+
【文字を入力】→【その情報を取得】→【3桁ずつカンマを入れる】→【ブラウザ上に文字を表示する】
|
|
42
34
|
|
|
43
|
-
### 【追記①】期待する動作
|
|
44
35
|
|
|
45
|
-
質問をいただきましたので期待する動作を追記させていただきます。
|
|
46
36
|
|
|
47
|
-
|
|
37
|
+
### その他のあとから追加する機能（参考）
|
|
38
|
+
※質問いただいたため記載しておきます。
|
|
48
39
|
|
|
40
|
+
1．数字以外は入力不可。
|
|
49
|
-
|
|
41
|
+
→数字以外の文字はカーソルが外れた段階で自動的に削除されます。
|
|
50
42
|
|
|
51
|
-
|
|
43
|
+
2．全角の数字は、半角の数字に自動変換。
|
|
52
44
|
|
|
53
|
-
|
|
45
|
+
3．数字の貼り付けは見落としていたのですが、動作を確認したところ、カーソルが外れた段階でカンマが挿入されました。
|
|
54
46
|
|
|
55
|
-
### 【追記③】詳細な動作
|
|
56
|
-
1.数字以外は入力不可。
|
|
57
|
-
→数字以外の文字はカーソルが外れた段階で自動的に削除されます
|
|
58
47
|
|
|
59
|
-
2.全角の数字は、半角の数字に自動変換。
|
|
60
|
-
|
|
61
|
-
3.GIFにもあるのですが、横ボタンを押すとカンマは飛ばされます。
|
|
62
|
-
→なのでカーソル文字分はスキップされるため、カーソルを気にしない入力ができるようになっています。
|
|
63
|
-
|
|
64
|
-
4.数字の貼り付けは見落としていたのですが、動作を確認したところ、カーソルが外れた段階でカンマが挿入されました。
|
|
65
|
-
|
|
66
48
|
###
|
|
67
|
-
前提条件を記載していなかったので、
|
|
49
|
+
前提条件などを記載していなかったので、みなさまのお手数をとらせてしまいました。申し訳ありません。
|
|
68
|
-
|
|
50
|
+
頂いた質問などを整理して質問内容を修正いたしました。
|
|
69
51
|
|
|
70
52
|
皆様の回答から、一般的な実装ではないのかと思いますが、用途を絞ると非常に使いやすいと感じています。
|
|
71
|
-
（このGIFの入力欄を使ったサービスは数千社が利用していることから、ある程度使いやすいシステムに最適化されていると考えています。）
|
|
53
|
+
（このGIFの入力欄を使ったサービスは数千社が利用していることから、ある程度使いやすいシステムに最適化されていると考えています。）
|
|
54
|
+
|
|
55
|
+
引き続きどうぞよろしくお願いいたします。
|
2
前提条件と詳細な動作、お詫びを追加しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -40,10 +40,32 @@
|
|
|
40
40
|
```
|
|
41
41
|
|
|
42
42
|
|
|
43
|
-
### 【追記】期待する動作
|
|
43
|
+
### 【追記①】期待する動作
|
|
44
44
|
|
|
45
45
|
質問をいただきましたので期待する動作を追記させていただきます。
|
|
46
46
|
|
|
47
47
|
|
|
48
48
|
|
|
49
|
-
こちらのようにカンマの場所が変わらず、また左右のボタンをおして動かしてもカンマを飛ばすようなものが理想です。
|
|
49
|
+
こちらのようにカンマの場所が変わらず、また左右のボタンをおして動かしてもカンマを飛ばすようなものが理想です。
|
|
50
|
+
|
|
51
|
+
### 【追記②】前提条件
|
|
52
|
+
|
|
53
|
+
作りたいものは金額の入力欄で基本的に数字以外の入力はありません。
|
|
54
|
+
|
|
55
|
+
### 【追記③】詳細な動作
|
|
56
|
+
1.数字以外は入力不可。
|
|
57
|
+
→数字以外の文字はカーソルが外れた段階で自動的に削除されます
|
|
58
|
+
|
|
59
|
+
2.全角の数字は、半角の数字に自動変換。
|
|
60
|
+
|
|
61
|
+
3.GIFにもあるのですが、横ボタンを押すとカンマは飛ばされます。
|
|
62
|
+
→なのでカーソル文字分はスキップされるため、カーソルを気にしない入力ができるようになっています。
|
|
63
|
+
|
|
64
|
+
4.数字の貼り付けは見落としていたのですが、動作を確認したところ、カーソルが外れた段階でカンマが挿入されました。
|
|
65
|
+
|
|
66
|
+
###
|
|
67
|
+
前提条件を記載していなかったので、景観重視と誤解をさせてしまっているのだと思います。
|
|
68
|
+
お手数をとらせてしまい申し訳ありません。
|
|
69
|
+
|
|
70
|
+
皆様の回答から、一般的な実装ではないのかと思いますが、用途を絞ると非常に使いやすいと感じています。
|
|
71
|
+
（このGIFの入力欄を使ったサービスは数千社が利用していることから、ある程度使いやすいシステムに最適化されていると考えています。）
|
1
期待する動作がわかるようにGIF動画を追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -37,4 +37,13 @@
|
|
|
37
37
|
|
|
38
38
|
});
|
|
39
39
|
|
|
40
|
-
```
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
### 【追記】期待する動作
|
|
44
|
+
|
|
45
|
+
質問をいただきましたので期待する動作を追記させていただきます。
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
こちらのようにカンマの場所が変わらず、また左右のボタンをおして動かしてもカンマを飛ばすようなものが理想です。
|