jQuery:监听文本框数字变化实时计算价格,如:贷款=成交价-首付,贷款会随着成交价、首付任何一个值的变化而实时变化

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)

猜你喜欢

转载自blog.csdn.net/weixin_44558497/article/details/86536553
今日推荐