3桁区切りを簡単に実装するコード

khiroWebエンジニア(@khiro14726723)です。

ユーザーにフォームの入力をしてもらう時に、自動で3桁区切りの表示をする機能があったほうが良いですよね。

その機能を、javascript（jQuery)で実装しました。

とてもシンプルなコードです。

サンプルサイト
ki-hi-ro.com
GitHub (ZIPファイルのダウンロード可)
github.com
解説
1000と入力すると、1,000となります。

1000000（100万）の場合

8568645796325の場合

3桁ごとに , が付きます。

HTML

<div class="form-group">
  <input type="text" class="form-control" id="number" placeholder="1000以上の数値を入力して、tabキーを押してください">
</div>

id="number"は、javascriptで使用します。

form-controlは、bootstrapで定義されているクラス名です。
これによって、フォームにスタイルが当たっています。

bootstrapについては、以下の参考書がおすすめです。

Bootstrap 4 フロントエンド開発の教科書

javascript（jQuery）

function threeDigit(id) {
    $(document).on('blur', id, function(){
      var inputVal = $(this).val().replace( /,/g , "");
      $(this).val(Number(inputVal).toLocaleString());
    })
  }

  threeDigit('#number');

threeDigitという関数を定義し、'#number'を引数として渡しています。

イベントが発生するタイミングは、フォームからフォーカスが外れた時です。(blurイベント)

$(document).on('blur', id, function(){
})

blurイベントの中では、inputValという変数を定義しています。
代入している値は、replaceによってフォームの入力値から , が取り除かれた文字列です。
フォームの入力値は、$(this).val()で取得しています。

var inputVal = $(this).val().replace( /, /g , "");

最後に、inputValを数値に置き換えて、toLocaleString()を使用して3桁区切りにしたものを
フォームの入力値にしています。

$(this).val(Number(inputVal).toLocaleString());

toLocaleString()については、以下の記事が参考になります。
www.yoheim.net

toLocaleString()はロケール（=言語、国、地域、などを表現する、例：ja）に合わせた数値表現を行うためのメソッドです。ロケールによって表示が異なりますが、日本語や英語の場合には3桁カンマ区切りとなります。

サンプルコードの実用例

実際に使用する時は、input要素のidに合わせて関数を実行してください。

例えば、以下のinput要素の場合、
HTML

<input type="text" id="number2">

javascript（jQuery）

function threeDigit(id) {
    $(document).on('blur', id, function(){
      var inputVal = $(this).val().replace( /,/g , "");
      $(this).val(Number(inputVal).toLocaleString());
    })
  }

  threeDigit('#number');

  threeDigit('#number2'); //追加

threeDigit('#number2');
この一行を追加すると、3桁区切りが機能します。