数値の書式について（３桁ごとにカンマ）

３桁ごとのカンマの表示のおける注意点

　<input type="number"> で数値入力ができるのですが、やはりそのままでは、 カンマ,で３桁ごとの区切りは表示されませんし、表示できるようにもなりません。

　以下は <input type="number"> の初期状態での例です。

<label>なにか入力してみて　<input type="number" name="number" value="1000" /></label>

　３桁ごとのカンマといった表記するためにはCSS 、JavaScript を使用して入力があったら表示を変更するように組み込まなければなりません。
　<input> で３桁区切りを表示するには <input type="text"> でテキストとして入力し、JavaScript を利用して3桁区切りに表示します。

<form name="test" action="javascript:void(0);" method="post">
<label>なにか入力してみて　<input type="text" name="number" value="1,000" style="font-family: 'Courier New','Monaco','Osaka-Mono','Consolas',monospace;text-align: right;" oninput="this.value=Number(this.value.replace(/,/g, '')).toLocaleString();" /></label>
<input type="submit" value="送信" onclick="nmbr = Number(test.number.value.replace(/,/g, ''));test.number.type='number';test.number.value=nmbr;"/>
</form>

　ただし、３桁区切りのテキストでは数値として認識されません。テキストを数値としてサーバーにそのまま送信することはできません。再度数値に戻す必要があります。

　上記の例の送信ボタンをクリックしてみてください。入力テキストが数値に置き換わります。（この例は不完全であることに注意してください）

　このように JavaScript を利用して3桁区切りに表示できますが、ユーザーが入力した内容を変更する処理は好ましくありません。エラーの元になる場合があるためです。なるべくなら、数値で入力されたものは数値としてサーバーに送るようにしたほうが賢明です。
　HTML ではその機能からみるに、入力フォームでは数値は数値のままで入力（右寄せ、等幅フォントにはできます）し、サーバーにその内容を送信したほうが無難です。
　そのことに注意して以下の解説をお読みください。

右寄せ

　CSS、スタイルシートで設定する方法です。text-align: right;を指定します。

text-align: right;

　例えば <input> で右寄せに表示すると以下のようになります。

<label>なにか入力してみて　<input type="number" name="number" value="1000" style="text-align: right;" /></label>

　詳しくはtext-alignプロパティページを参照して下さい。

数値の桁合わせ

　数値の桁を合わせるためには、CSS でフォントを等幅フォントにします。

　等幅フォントは、以下のようにフォントファミリーで monospace に指定します。

font-family: monospace;

　 monospace ではフォントの形が気に入らないかもしれません。他のフォントを表示したい場合は以下のようにフォントファミリーを指定します。

font-family: "Courier New","Monaco","Osaka-Mono","Consolas",monospace;

　指定されたフォントファミリーは利用できる状態なら、そのフォントが利用されます。指定されたフォントファミリーを先頭から利用できるかが検証されます。
　一番先頭から順に使用したいフォントファミリーを指定します。

<label>なにか入力してみて　<input type="number" name="number" value="1000" style="font-family: 'Courier New','Monaco','Osaka-Mono','Consolas',monospace;text-align: right;" /></label>

　フォントファミリーについて詳しくはfont-family プロパティを参照してください。

　右寄せや桁合わせのための等幅フォントの指定を CSS のセレクターでinput type="number"に対して反映するようにします。

input[type="number"]{
	text-align: right;
	font-family: "Courier New","Monaco","Osaka-Mono","Consolas",monospace;
}

カンマを付加

var num=123456789;
var txt_num = num.toLocaleString();
..
txt_num は  になります

var num=123456789.123456789;
var txt_num = num.toLocaleString( undefined, { maximumFractionDigits: 10 });
..
txt_num は  になります

<xsl:value-of select="format-number(debit-amount,'###,##0')" />

関連（Related）