使用jquery keyup change
函数,我创建了一个计算框,根据输入执行某个计算。
但是假设在页面加载时输入已经有了一些值。如果在页面加载时输入不为空,那么显示该计算结果的最有效方法是什么?
这是示例代码段:
$(document).ready(function() {
$(document).on("keyup change", "#num1, #num2", function() {
var num1 = $('#num1').val();
var num2 = $('#num2').val();
var cal = 20 * num1 * num2;
$('#result').html('The reslut is ' + cal);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Number 1: <input name="num1" id="num1" type="number" value="4"><br>
Number 2: <input name="num2" id="num2" type="number" value="5"><br>
<div id="result"></div>
答案 0 :(得分:3)
触发它 - 我使用输入,因为它也处理粘贴
$(function() {
$(document).on("input", "#num1, #num2", function() {
var num1 = $('#num1').val();
var num2 = $('#num2').val();
var cal = 20 * num1 * num2;
$('#result').html('The result is ' + cal);
});
$("#num1").trigger("input");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Number 1: <input name="num1" id="num1" type="number" value="4"><br> Number 2: <input name="num2" id="num2" type="number" value="5"><br>
<div id="result"></div>
或者命名该函数并运行它
function calc() {
var num1 = $('#num1').val();
var num2 = $('#num2').val();
var cal = 20 * num1 * num2;
$('#result').html('The result is ' + cal);
}
$(function() {
$(document).on("input", "#num1, #num2", calc)
calc();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Number 1: <input name="num1" id="num1" type="number" value="4"><br> Number 2: <input name="num2" id="num2" type="number" value="5"><br>
<div id="result"></div>