jQuery keyupメソッドでテキストボックスに入力した値から自動計算する
環境
Windows 10 home 64bit
Google Chrome 107.0.5304.122
構文
1.keyupイベントの定義
$('.セレクタークラス名’).keyup(function(){処理コード}
2.入力値を取得する
$('.セレクターのクラス名’).val()
3.parseFloat(文字列)
浮動小数点値を返します。
4.toFixed(digits)
与えられた数値を固定小数点表記を用いて表した文字列です。
使用例
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
//セレクター名「textone」キーを離した時
$('.textone').keyup(function(){
var textone;
var texttwo;
textone = parseFloat($('.textone').val());
texttwo = parseFloat($('.texttwo').val());
var result = textone + texttwo;
$('.result').val(result.toFixed(2));
});
//セレクター名「texttwo」キーを離した時
$('.texttwo').keyup(function(){
var textone;
var texttwo;
textone = parseFloat($('.textone').val());
texttwo = parseFloat($('.texttwo').val());
var result = textone + texttwo;
$('.result').val(result.toFixed(2));
});
});
</script>
</head>
<body>
<table >
<p>点数1: <input type="text" name="value1" class="textone"><p>
<p>点数2: <input type="text" name="value2" class="texttwo"></p>
合 計: <input type="text" name="result" class="result">
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
//セレクター名「textone」キーを離した時
$('.textone').keyup(function(){
var textone;
var texttwo;
textone = parseFloat($('.textone').val());
texttwo = parseFloat($('.texttwo').val());
var result = textone + texttwo;
$('.result').val(result.toFixed(2));
});
//セレクター名「texttwo」キーを離した時
$('.texttwo').keyup(function(){
var textone;
var texttwo;
textone = parseFloat($('.textone').val());
texttwo = parseFloat($('.texttwo').val());
var result = textone + texttwo;
$('.result').val(result.toFixed(2));
});
});
</script>
</head>
<body>
<table >
<p>点数1: <input type="text" name="value1" class="textone"><p>
<p>点数2: <input type="text" name="value2" class="texttwo"></p>
合 計: <input type="text" name="result" class="result">
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
//セレクター名「textone」キーを離した時
$('.textone').keyup(function(){
var textone;
var texttwo;
textone = parseFloat($('.textone').val());
texttwo = parseFloat($('.texttwo').val());
var result = textone + texttwo;
$('.result').val(result.toFixed(2));
});
//セレクター名「texttwo」キーを離した時
$('.texttwo').keyup(function(){
var textone;
var texttwo;
textone = parseFloat($('.textone').val());
texttwo = parseFloat($('.texttwo').val());
var result = textone + texttwo;
$('.result').val(result.toFixed(2));
});
});
</script>
</head>
<body>
<table >
<p>点数1: <input type="text" name="value1" class="textone"><p>
<p>点数2: <input type="text" name="value2" class="texttwo"></p>
合 計: <input type="text" name="result" class="result">
</table>
</body>
</html>
実行結果
点数1欄に「11.1」、点数2欄に「22.3」と入力すると、「合計」欄に33.40が表示されます。