【JavaScript】inputタグで3桁ごとにカンマ表示

３桁ごとのカンマとは？

よく簿記や経理などで金額を表す際に「1,000,000」など３ケタごとの「,」が付いていますが、これが今回inputタグでやりたいことです。

まず、inputタグのtypeで３桁ごとのカンマを表示してくるものがないか調べましたが無いようでした。

数値入力用で<input type="number">はありますが、これだとカンマが表示されず「1000000」と表示されます。

そもそも「,」を付けたいので数値ではなく文字列ですね。

サンプル

サンプルはこちらです↓↓

半角で数字を入力して、フォーカスアウトすると３桁ごとにカンマが表示されるようにしています。

ソースコード

HTMLとJavaScriptで作成できます。

HTML

数値ではなく文字列を扱うのでtype="text"です。

また、pattern="\d*"とすることで、iPhoneでは数字キーボードが表示されるようになります。調べた情報によるとAndroidでも数字キーボードが表示されるらしいです。

そして、inputタグからフォーカスアウトした際にJavaScriptが動くようにするためにonblur="kanmaChange(this);"があります。今回はkanmaChangeという関数が呼び出されます。

<input type="text" onblur="kanmaChange(this);" pattern="\d*">

JavaScript

先ほど出てきたkanmaChangeという関数です。

何度も出てくるconsole.log();は動作確認用なので消していただいても構いません。

function kanmaChange(inputAns){
 console.log(inputAns);
 let inputAnsValue = inputAns.value;
 console.log(inputAnsValue);
 let numberAns = inputAnsValue.replace(/[^0-9]/g, "");
 kanmaAns = numberAns.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
 console.log(kanmaAns);
 if(kanmaAns.match(/[^0-9]/g)){
  inputAns.value= kanmaAns;
  return true;
 }
};

補足説明

inputAnsに関数を呼び出したinputタグの情報が渡されます。

inputAns.valueとすることで、inputタグで入力した値を取得しています。

inputAnsValue.replace(/[^0-9]/g, "")とすることで、先ほど取得した値に半角数字以外の文字があると削除されます。正規表現を使っています。

numberAns.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,')とすることで、３桁ごとにカンマを挿入してくれます。ここでも正規表現を使っています。

あとはif文でカンマが挿入されて文字列になったはずのkanmaAnsをチェックして、trueであればkanmaAnsを先ほどのinputタグに返すという仕組みにしてみました。

きっと経験豊富な方が見たらツッコミどころがあると思いますが、先ほどのサンプルのように一応動きます。

最後に

金額を入力するinputタグなら３桁ごとにカンマを入れたいものです。

jQueryを使用するものならインターネット上にコピペで使えそうな情報もありましたが、生のJavaScriptで書けるようになりたいと思い、その勉強記録を残してみました。

もっと良い書き方がありそうですが、とりあえず動くのでこれで良しとします！

ちなみに、私がJavaScriptを覚えるために使用した入門書はこちらです。初心者でも分かりやすいのでオススメです。

また、jQueryはこちらで勉強しました。こちらも分かりやすかったのでオススメです。

さらに、モダンフロントエンド開発のためにReactの基礎を学んでみたい方にはこちらがオススメです。

※プログラミングスクールという近道も

スクールだとTechAcademyテックアカデミー が目的に合ったコースを選びやすくてオススメです。（無料キャリアカウンセリングも受けれます）

【無料体験】ができるので、試しに話だけでも聞いてみるのも良いかもしれません🎁

>> TechAcademyの無料体験はこちら

　

今回は以上です！