javascript input type="number"の入力値を自動でフォーマットしたいです

お題の通りなんですが、
inputに入力しているそばから自動で小数点以下2桁付「出来れば小数点下3桁目を四捨五入」にフォーマットする方法はあるでしょうか？

toFixed(2)とか色々調べて試しては見たんですが実現できなくて困っています。

宜しくお願いいたします。

行動規範の内容に同意します

回答3件

ベストアンサー

html
1<!DOCTYPE HTML>
2<html lang="ja-JP">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6	</head>
7	<body>
8
9		<form action="">
10			<input class="num" type="text" name="num[]" />
11			<input class="num" type="text" name="num[]" />
12			<input class="num" type="text" name="num[]" />
13			<input class="num" type="text" name="num[]" />
14		</form>
15		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
16		<script type="text/javascript">
17			$(function () {
18				$(".num").on('change', function () {
19					var val = $(this).val();
20					var n = Math.round(val * 100) / 100;
21					$(this).val(n);
22				});
23			});
24		</script>
25	</body>
26</html>

コメントを受けて追記

html
1<!DOCTYPE HTML>
2<html lang="ja-JP">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6	</head>
7	<body>
8
9		<form action="">
10			<input class="num" type="text" name="num[]" />
11			<input class="num" type="text" name="num[]" />
12			<input class="num" type="text" name="num[]" />
13			<input class="num" type="text" name="num[]" />
14		</form>
15		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
16		<script type="text/javascript">
17			$(function () {
18				$(".num").on('change', function () {
19					var val = $(this).val();
20					var n = new Number(val);
21					$(this).val(n.toFixed(2));
22				});
23			});
24		</script>
25	</body>
26</html>

投稿2015/12/18 16:02

編集2015/12/18 16:22

退会済みユーザー

総合スコア0

退会済みユーザー

2015/12/18 16:16

回答ありがとうございます。頂いたソースをそのまま試させていただきました私の、質問の仕方が悪かったんですね.. 入力値が整数の場合でも　小数点以下二けた（.00）が付くようにフォーマットしたいのですが何かいい方法はありますでしょうか？

退会済みユーザー

2015/12/18 23:40

ありがとうございます。昨夜は不覚にも寝入ってしまって　お礼が遅くなりましてもすみません！>< 勉強になります！本当にありがとうございました。

退会済みユーザー

2015/12/19 09:13

<input class="num" type="text" name="num[]" /> で type属性を number ではなく、 text にしている点。 var n = new Number(val); の意味については、しっかり考察した上で利用してください。

行動規範の内容に同意します

$(".num").change(function(){
var n = $(this).val();
// 小数点以下2桁に直してnに
$(this).val(n);
});

投稿2015/12/18 15:29

jinco

総合スコア432

退会済みユーザー

2015/12/18 15:54

回答ありがとうございます。 <form id="quotation" name="quotation" action="./" method="POST"> <input id="num1" class="num" type="number" val="" name="num" value="" /> </form> 上記コードに下記のスクリプトを試してみたんですけど $(".num").change(function(){ var n = $(this).val(); n.toFixed(2); $(this).val(n); }); やはり　入力値がそのまま表示されてしまいます。

行動規範の内容に同意します

イベントはonblurまたはonchangeで
数値であることをチェックした上で
100で乗算→四捨五入→100で除算（小数点第3位で四捨五入された値になる）

投稿2015/12/18 14:51

yuki84web

総合スコア1857

退会済みユーザー

2015/12/18 15:50 編集

ありがとうございます。一応　下記のようなソースを試してみたのですが実際にはformの中に　同じクラス（ class="num"）のinputが複数あり　省略しています。 type="number"に指定してありますので、数値のチェックは省略しています。 <form id="quotation" name="quotation" action="./" method="POST"> <input id="num1" class="num" type="number" val="" name="num" value="" /> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> jQuery(function($){ $(document.forms["quotation"]).change(function(){ 　$(".quotation").each(function() { var num = $(this).find('.num').val(); //inputの値を取得 num.toFixed(2);//小数点以下2桁まで表示にフォーマット $(this).find('.num').val(num);//値挿入　}); }); }); </script>

行動規範の内容に同意します

あなたの回答