jQuery:监听文本框数字变化实时计算价格,如:贷款=成交价-首付,贷款会随着成交价、首付任何一个值的变化而实时变化
效果图:
1、html代码:
(样式请自行调整)
代码复制区://type="number"起到限制文本框输入其他字符,只能输入数字。
成交价:<input type="number" placeholder="请填写" id="housing-chengjiao-price">
首付:<input type="number" placeholder="请填写" id="down-payments">
贷款:<div class="item-input" id="loan"></div>
2、js代码:
代码复制区:
$(document).bind('input propertychange',"#housing-chengjiao-price,#down-payments",function(){
var cjprice = $("#housing-chengjiao-price").val();
var shoufu=$('#down-payments').val();
var dkprice=cjprice-shoufu;//计算贷款
$('#loan').html(dkprice);
});
代码解释:(想了解更多的可以自行百度)
bind():
方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数,这里同时绑定了input和propertychange两个方法。
’input propertychange’:
1)propertychange只要当前对象的属性发生改变就会触发该事件;
2)input是标准的浏览器事件,一般应用于input元素,当input的value发生变化就会发生,无论是键盘输入还是鼠标黏贴的改变都能及时监听到变化。(参考:https://blog.csdn.net/qq_30979185/article/details/69930042)