数値の書式について(3桁ごとにカンマ)
HTML、特に input エレメントにおいて、数値の右寄せ、3桁ごとのカンマ、桁合わせの方法について困るときがあります。
このページでは、HTML における数の書式 右寄せ
、3桁ごとのカンマ
の付加、数値の桁合わせ
についてを解説します。
<label>なにか入力してみて <input type="number" name="number" value="1000" style="font-family: 'Courier New','Monaco','Osaka-Mono','Consolas',monospace;text-align: right;" /></label>
右寄せ
と数値の桁合わせ
は CSS を利用します。右寄せ
は、CSS の text-align: right;
を指定し、数値の桁合わせ
のためには font-family を上記のような等幅フォント
に指定します。
それらのことを CSS のセレクターでinput type="number"
に対して反映するようにします。
input[type="number"]{
text-align: right;
font-family: "Courier New","Monaco","Osaka-Mono","Consolas",monospace;
}
3桁ごとのカンマ
は、金額の表示に利用されることが多いのですが、HTML のみでは3桁区切りで数値を表示するという機能はないようです。
3桁ごとのカンマ
といった表記するためには CSS 、JavaScript を使用して、type = 'text'
で文字列として、さらに入力があったら3桁区切りに変更するように組み込まなければなりません。
ただし、そのような方法ではサーバーにデータを送る際に問題が発生します。詳しくは以下の3桁ごとのカンマの表示のおける注意点
を参照してください。
<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>
3桁ごとのカンマの表示のおける注意点
<input type="number"> で数値入力ができるのですが、やはりそのままでは、 カンマ,
で3桁ごとの区切りは表示されませんし、表示できるようにもなりません。
以下は <input type="number"> の初期状態での例です。
<label>なにか入力してみて <input type="number" name="number" value="1000" /></label>
3桁ごとのカンマ
といった表記するためにはCSS 、JavaScript を使用して入力があったら表示を変更するように組み込まなければなりません。
<input> で3桁区切りを表示するには <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>
ただし、3桁区切りのテキストでは数値として認識されません。テキストを数値としてサーバーにそのまま送信することはできません。再度数値に戻す必要があります。
上記の例の送信
ボタンをクリックしてみてください。入力テキストが数値に置き換わります。(この例は不完全であることに注意してください)
このように 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;
}
カンマを付加
JavaScript
JavaScriptで数値または文字列をカンマを付加したものに置き換える方法です。toLocaleString()関数を使います。
toLocaleString() 関数は数値、日付などをローカル表記に変更してくれる関数です。国を指定しなければ、数値は3桁ごとにカンマを加えます。
var num=123456789; var txt_num = num.toLocaleString(); .. txt_num は になります
ただし、この方法では小数点以下で丸め込み処理
が起きます。もし丸められたくない場合は、maximumFractionDigits オプションを利用します。
var num=123456789.123456789; var txt_num = num.toLocaleString( undefined, { maximumFractionDigits: 10 }); .. txt_num は になります
maximumFractionDigits オプションの指定値は丸め込みが起きない桁数です。
表示だけならばこのように3桁区切りに加工して表示してもよいと思いますが、HTML の機能をみるに数値の入力と更新の際は3桁区切りへの加工は特に注意したほうがよいでしょう。
<input> には3桁区切りで表示する機能がありません。JavaScript などを利用して3桁区切りに表示することができますが、ユーザーの入力値を加工する処理を加えるとエラーの元になります。デバグといった確認作業が逐一必要になります。
ユーザーが入力したものはなるべく加工しないでサーバーに送信した方が無難です。
XSLT
XSLTでの方法です。3桁ごとにカンマを付加します。
<xsl:value-of select="format-number(debit-amount,'###,##0')" />