HTMLで数値入力をした場合、小数点以下の桁数を自動的に合わせたい場合があります。
その場合、JavaScriptの関数【toFixed】を使用するの便利です。
toFixed
使い方：Number.toFixed(表示したい小数点以下の桁数);
<script type="text/javascript">
$(function(){
$("#fixedTest").on("focusout",function(){
//数値型に変換しないとtoFixedがうまく動作しない。
var num = parseFloat($(this).val());
$(this).val(num.toFixed(3));
});
});
</script>
<p>
<input type="text" id="fixedTest" name="fixedTest" value="" placeholder="数値を入れてください" />
</p>上記の例だと6.6⇒6.600、6.1234⇒6.123と表示してくれます。
足らない場合は0で埋めてくれるし、多すぎる場合は切り落としてくれる便利な関数です。
小数点以下は近似値で表示される場合がある
先ほどのテキストボックスに9.9996を入力してみると10.000で表示されます。
toFixed([digits])は[digits]以上の桁数を入力されると近似値（≒四捨五入）で表示されます。
そのため単純な数値の切り落としでは使用できないんですよね。
近似値で表示してほしくない場合、floorやceilを使用して先に小数点以下桁を切り捨てる方法があります。
<script type="text/javascript">
$(function(){
var digits = 3;
//小数点以下桁数
$("#fixedTest2").on("focusout",function(){
$(this).val(omission($(this).val() , digits));
});
});
/**
* 指定された小数点桁数以下切り捨て
* @param {float} num 入力値
* @param {integer} digit 小数点有効桁数
* @returns {float} 返却値（数値以外の場合空値）
*/
function omission(num,digits){
var pattern = new RegExp("^[-]?([1-9]\\d*|0)(\\.\\d+)?$");
if(pattern.test(num)){
//入力された値が数値の場合
num = num * Math.pow(10,digits);
if(num >= 0){
num = Math.floor(num);
}else{
num = Math.ceil(num);
}
var returnVal = num * Math.pow(10, -1 * digits);
return returnVal.toFixed(digits);
}
return "";
}
</script>
<input type="text" id="fixedTest2" name="fixedTest2" value="" placeholder="数値を入れてください" /> 単純に指定された値×10小数点桁数分計算を行いい、余った小数点を切り捨てた後小数点桁数分10-(小数点桁数)計算しています。
しかし小数点桁数が3・入力値が0.143にすると0.14300000000000002と表記されるため、toFixedで再度指定小数点以下切り捨てを行っています。
toFixedだと指定小数点に満たない0埋めされますが、不要な場合は25行目の
「return returnVal.toFixed(digits);」⇒「return parseFloat(returnVal.toFixed(digits));」にすればいいと思います。
