実現したいこと

数字の入力・削除する際に、リアルタイムに数字を3桁ずつスムーズにカンマで区切りたいです。

こちらが実現したい動作となります。

前提条件

金額の入力欄なので、入力文字は半角の数字のみとなります。

期待する動作の詳細条件

1．数字を入力/削除すると、数字を3桁ずつカンマ区切りできる。

2．カーソルを矢印キーで移動した場合、カンマの部分は自動的に飛ばされます。
→カーソル文字分はスキップされるため、カーソルを気にしない入力ができるようになっています。（GIFでも確認できるかと思います。）

これまでにわかったこと

jQueryを利用してkeydownやkeyupのあとreplaceで実装すると、期待したスムーズな入力になりませんでした。
http://kwski.net/jquery/1074/

3桁ずつカンマで区切る際の動きをよくよく見てみると下記のような違いがあるようです。

● 参考サイトの場合 ●

【文字を入力】→【ブラウザ上に文字が表示】→【その情報を取得】→【3桁ずつカンマを入れる】→【ブラウザ上の文字を入れ替える】

● 期待する動き ●

【文字を入力】→【その情報を取得】→【3桁ずつカンマを入れる】→【ブラウザ上に文字を表示する】

その他のあとから追加する機能（参考）

※質問いただいたため記載しておきます。

1．数字以外は入力不可。
→数字以外の文字はカーソルが外れた段階で自動的に削除されます。

2．全角の数字は、半角の数字に自動変換。

3．数字の貼り付けは見落としていたのですが、動作を確認したところ、カーソルが外れた段階でカンマが挿入されました。

前提条件などを記載していなかったので、みなさまのお手数をとらせてしまいました。申し訳ありません。
頂いた質問などを整理して質問内容を修正いたしました。

皆様の回答から、一般的な実装ではないのかと思いますが、用途を絞ると非常に使いやすいと感じています。
（このGIFの入力欄を使ったサービスは数千社が利用していることから、ある程度使いやすいシステムに最適化されていると考えています。）

引き続きどうぞよろしくお願いいたします。

行動規範の内容に同意します

回答4件

たぶんkeydownではなくkeyupするだけ
ただ、文字の途中を修正してもフォーカスが移っちゃうので
ユーザビリティは悪いと思います。

普通はエクセルみたいに、入力中はカンマを表示せず
blurしたときに初めて処理をいれます

sample

javascript
1<script>
2$(function(){
3  $('.input-num').on('focus input',function () {
4    var num = $(this).val().replace(/\D/g, '');
5    $(this).val(num);
6    
7  }).on('blur',function () {
8    var num = $(this).val().replace(/(\d)(?=(\d\d\d)+$)/g, '$1,');
9    $(this).val(num);
10    
11  });
12});
13</script>
14<input type="tel" class="input-num">

投稿2018/08/30 00:55

編集2018/08/30 01:26

yambejp

総合スコア115300

no1knows

2018/08/30 01:00

ありがとうございます。上記のような実装をしているサービスが、非常に使いやすかったため、できれば採用したいと思っています。

yambejp

2018/08/30 01:27

>非常に使いやすかった感じ方次第ですが数値を入力するときにカンマがかってにはいるのは必ずしもユーザーのためにはならないことだけ認識する必要があるでしょういちおう前述したものはsampleつけておきました

no1knows

2018/08/30 02:32

たしかに必ずしもユーザーのためにはならないかもしれません。。サンプルありがとうございます！

行動規範の内容に同意します

懸念

気になるのは、「ユーザが明示的にカンマを削除/入力した時の挙動」と、

1234 -> 1,234 -> 1234(ユーザがカンマ削除) -> ????
123 -> 123,(ユーザがカンマ入力) -> 123,4 -> ????

「ユーザが明示的に数字を削除した時の挙動」と、

1234 -> 1,234 -> 1,34(ユーザが2を削除。入力ミスした為、修正しようとしている) -> ????

「ユーザが明示的に数字/カンマ以外の文字を入力した時の挙動」と、

123@4 -> ????

「ユーザがIME変換機能を使って数値入力する事がサポートされているのか(IME変換前の段階で勝手に補完されるのは好ましくない。IMEの単語登録された辞書から入力する人もいる)」と

「マウスを使ったクリップボードからの貼り付けが有効なのか(キーボード入力されないので、keyupは無効)」です。

入出力を一カ所に統合するデメリット

入力と出力を一つのテキストボックスで行うと、

ユーザの意図しない入力が発生するので直感的ではない
ユーザがどんな入力をしてもいいように、様々なパターンを考慮しなればならない

という問題があります。

大体、勝手にガンマが挿入されると、入力ミスした時にカンマ分もカーソルを戻さなくてはならず、入力の手間だけ考えると面倒くさいです。
質問者さんが求める実装はあくまで見た目が美しいという景観重視の発想で、ユーザビリティは考慮されていないように思います。

私としては、「ユーザが好む方法で入力出来ること」「ユーザの入力を阻害しないこと」が大前提なので、入力と出力は別々の場所にあるべきと考えます。

直観的

追記を読みましたが、直観的ではないと思いました。
ここでいう「直観的ではない」は

キーボードで 1 を入力 → 1 が出力される
キーボードで [←] を入力 → カーソルが1つ左に移動する

というようなPC操作の一般常識的な動作を逸脱していないこと、です。
その手の逸脱した動作は作り手にとっては「使いやすい」と思っても、世間一般の人には学習コストが高すぎるのです。

1．数字を入力/削除すると、数字を3桁ずつカンマ区切りできる。

「なぜ勝手にカンマが挿入されるんだ？入力してないカンマが勝手に入るなんてけしからん。大体、カンマ区切りの数字なんて見づらいだろうが！」
(カンマ区切りの数字が見やすいかどうかははっきりいって主観です。ならば、一般常識的な動作におさめた方が批判は少ないでしょう。「1234と入力して、1234が出力されるなんてけしからん！」と怒る人はいません。)

金額の入力欄なので、入力文字は半角の数字のみとなります。

「"ひゃくまん" と入力して、"1000000" にIME変換しようとしたのに出来んぞ。どういうことだ？」

2．カーソルを矢印キーで移動した場合、カンマの部分は自動的に飛ばされます。

「なぜカーソルが2つ分移動するんだ？矢印キーは一回しか入力してないのに！」

3．数字の貼り付けは見落としていたのですが、動作を確認したところ、カーソルが外れた段階でカンマが挿入されました。

「なぜクリップボードからの貼り付けだけ挙動が違うんだ？他にも穴があるんじゃないのか？」

ようするに、作者が(個人的に)既存UIに不満を持って解消した独自UIは、既存UIに慣れ切った一般人には使いにくいという事です。
新しいUIを提案するということは、そのUIの学習コストの支払いを利用者に強要する事に他なりません。

Selection API

技術的観点あと、気になったのはアニメGIFでは右端から入力/削除しかしなかった事ですね。
カーソルを数字の真ん中に持っていって削除or数字挿入して、カーソル位置が保持されるようなら、カーソル制御も行っています。
window.getSelection 等を使って、カーソル位置を記憶し、置換処理後に適切なカーソル位置を計算して移動しているのでしょう。
そこまでいくと、範囲選択に対応しているかが興味深いですが、

12,345→1と2の間にカーソルを移動し、Shiftを押しながら、[→] キーで4と5の間まで移動→1を入力→????
12,345→1と2の間にカーソルを移動し、Shiftを押しながら、[→] キーで4と5の間まで移動→[Delete] を入力→????
12,345→1と2の間にカーソルを移動し、Shiftを押しながら、[→] キーで4と5の間まで移動→[Backspace] を入力→????

Re: zilch さん

投稿2018/08/30 03:48

編集2018/08/30 13:06

think49

総合スコア18172

think49

2018/08/30 03:56

後は、機械的に処理されるべき「カンマの自動挿入」をユーザ自身で編集可能(手入力可能)としてしまうのがナンセンスだと思います。自動化処理は、ユーザが編集不可能な領域でやるべきです。

no1knows

2018/08/30 07:13

説明不足で申し訳ありません。追記①にも記載してありますようにコンマは飛ばす形となっており、編集不可能な形になっております。その他の懸念に関しても追記させていただきましたのでご確認頂けると幸いです。

think49

2018/08/30 13:17

親記事に追記しました。なんというか、すごく他人事のように書くのですね。「こうなってました」で終わると、要件だけ書いて「後はよろしく」な丸投げ質問の域を出ませんよ？私なら、考える為のヒントを得たら、いろいろ試してみますがね。「こうなってました。で、これを実装するには～が必要だと思うんです。この機能を使ってこういうコードを書いてみたのですが、期待に反して～になりました。更に検証を勧めると、こういうことがわかって、...」とか。

行動規範の内容に同意します

「入力項目リアルタイムカンマ」でググると以下の記事にあたりました。
http://kwski.net/jquery/1074/
デモもありますが、半角入力時にスムースにカンマが付いていると思います。
全角入力時はバグってますが。。。(IMEを無効で対処できそうですが、IE以外には無意味ですね。。)

投稿2018/08/30 02:26

SE-studying-now

総合スコア351

no1knows

2018/08/30 02:31

確認ありがとうございます。こちらが質問に記載した【jQueryのkeyupを利用】バージョンで、文字が揺れているような感じなのです。

SE-studying-now

2018/08/30 02:41

私の提示したページのデモも動作的には大差ないですよ。個人的にはzilchさんのコードで問題ないと思いますが。 zilchさんの見られたサービスの入力欄を見てみたいですね。

no1knows

2018/08/30 03:16

ご連絡ありがとうございます。有料のサービスのためGIF動画を追記させていただきました。なにかヒントなどありましたらご教授いただけるとたすかります。

行動規範の内容に同意します

ナンバーフォーマットをしたいということでしょうか。

JavaScriptで数値フォーマットする標準API「Intl.NumberFormat」 (カンマ区切り、円・ドル表記、漢数字など)

投稿2018/08/30 00:53

m.ts10806

総合スコア80871

no1knows

2018/08/30 00:59

はい、そのとおりです！

m.ts10806

2018/08/30 01:00

提示した記事は現在使えるナンバーフォーマットの関数です。使ってみてください。

no1knows

2018/08/30 01:03

ありがとうございます。対応ブラウザを確認しながら試してみたいと思います！

m.ts10806

2018/08/30 01:05

記事の冒頭読んでますかね。 > ほぼすべてのブラウザやNode.jsでサポートされている数値をフォーマットするAPI「Intl.NumberFormat」を紹介する記事です。もちろん検証は必要ですが。今ひとつきちんと会話が成立している感がないのでよく読んでコメントしてください。

no1knows

2018/08/30 01:08

すいません。読んだのですが、他のサイトで対応ブラウザがIE11とかになっていたので、少し心配になったのです。。。 https://qiita.com/teyosh/items/b126f21a16b795885067

m.ts10806

2018/08/30 02:03 編集

そちらが提示した記事の更新日は 2016年12月13日私が提示した記事の更新日は 2018年04月17日一般的に記事の信憑性はどちらが高いと判断されるでしょうか。当該機能を取り扱っている記事は幾つか見つかりましたが、そのため私はなるべく新しい記事を持ってきました。ちなみに「この記事は最終更新日から1年以上が経過しています。」と出るようになっていますがそれは「情報が古くて現在とは変わってる可能性が高いよ」ということです。というか実際に使ってみればわかることでもあります。案ずるより生むがやすし。

no1knows

2018/08/30 02:29

いろいろと気を遣っていただきありがとうございます！

行動規範の内容に同意します

あなたの回答