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>
実行結果
点数1欄に「11.1」、点数2欄に「22.3」と入力すると、「合計」欄に33.40が表示されます。