牛骨文教育服务平台(让学习变的简单)
博文笔记

input限制3位小数输入

创建时间:2017-06-20 投稿人: 浏览次数:1528

如下图:通过改变圈1、圈2的值,计算出圈3的值。

且圈2的值只能输入数字,输完后显示3位小数。

HTML(节选)

<!-- 圈1部分 -->
<input type="text"  value="0" class="numStockText" />
<!-- 圈2部分 -->
<input type="text" class="unitPrice" value="0" onkeyup="value=value.replace(/[^d{1,}.d{1,}|d{1,}]/g,"")" maxlength="9">
<!-- 圈3部分 -->
<strong class="c-pink totalPrice">0</strong>

JS部分(节选)

// 界面价格动态计算显示
$(function() {
	// 数量变化计算总价
	$(".numStockText").bind("change",function(){
		var curNum = Number($(this).val());
		var unitPrice = Number($(this).parent().parent().find(".unitPrice").first().val());
		var totalPrice = curNum * unitPrice;
		totalPrice = Number(totalPrice).toFixed(3);
		 $(this).parent().parent().find(".totalPrice").text(totalPrice);
	});
	// 价格变化计算总价
	$(".unitPrice").bind("change",function(){
		var unitPrice = Number($(this).val()).toFixed(3);
		$(this).val(unitPrice);
		var curNum = Number($(this).parent().parent().find(".numStockText").first().val());
        totalPrice = Number(curNum * unitPrice).toFixed(3);
        $(this).parent().parent().find(".totalPrice").text(totalPrice);
	});
});



声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。