HTMLで数値入力をした場合、小数点以下の桁数を自動的に合わせたい場合があります。
その場合、JavaScriptの関数【toFixed】を使用するの便利です。
toFixed
使い方：Number.toFixed(表示したい小数点以下の桁数);
例）小数点以下3桁表示
[javascript htmlscript="true" title="ソース"] <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> [/javascript]
上記の例だと6.6⇒6.600、6.1234⇒6.123と表示してくれます。
足らない場合は0で埋めてくれるし、多すぎる場合は切り落としてくれる便利な関数です。
小数点以下桁数以上の数値を入力した場合、近似値で表示される。
先ほどのテキストボックスに9.9996を入力してみると10.000で表示されると思います。
toFixed([digits])は[digits]以上の桁数を入力されると近似値（≒四捨五入）で表示されます。
そのため単純な数値の切り落としでは使用できないんですよね。
近似値で表示してほしくない場合、floorやceilを使用して先に小数点以下桁を切り捨てる方法があります。
[javascript htmlscript="true" title="ソース"] <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="数値を入れてください" /> [/javascript]単純に指定された値×10小数点桁数行い、余った小数点を切り捨てた後小数点桁数分10-(小数点桁数)かけています
ただこれだと小数点桁数が3・入力値が0.143にすると0.14300000000000002と表記されるため、toFixedで再度指定小数点以下切り捨てを行っています。
toFixedだと指定小数点に満たない0埋めされますが、不要な場合は25行目の「return returnVal.toFixed(digits);」⇒「return parseFloat(returnVal.toFixed(digits));」にすればいいと思います。
色々処理が煩雑になっているのでもう少しどうにかならないかな。
