第160回日商簿記検定試験日まで

あと時間

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

JavaScript
ヒカテツ
ヒカテツ

こんにちは、ヒカテツです。

 

今回は「inputタグで3桁ごとのカンマ表示」の方法についてご紹介します。

 

駆け出しエンジニアの学習記録なのでお手柔らかにお願いします。

3桁ごとのカンマとは?

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

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

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

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

サンプル

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

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

ソースコード

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,')とすることで、3桁ごとにカンマを挿入してくれます。ここでも正規表現を使っています。

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

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

最後に

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

今回はインターネットで調べながら実装してみました。

jQueryを使用するものならコピペで使えそうな情報もありましたが、生のJavaScriptで書けるようになりたいと思いコピペはしませんでした。

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

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

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

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

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

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

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

 

今回は以上です!

コメント

タイトルとURLをコピーしました