昨天写小程序项目,在输入金额的框上也只是简单的为 input 设置了"type=‘number’";
并设置了一定的限制
money.value = money.value.replace(".","$#$").replace(/\./g, "").replace("$#$", ".");//只允许存在一个点
money.value = money.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数
可惜猝不及防的不足——验收:“来一个手贱的人,乱输数字,乱点怎么办?”
00000015.21——虽然结果仍是15.21,但是确实不好看,偷懒是过了点。
所以在此补充一波(三者换汤不换药):
//js(原生)
var money = document.getElementById('money');
money.addEventListener('keyup',function () {
money.value = money.value.replace(".","$#$").replace(/\./g, "").replace("$#$", ".");//只允许存在一个点
money.value = money.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数
//需要注意$3处(‘\d\d).’)的那个点,见下图
if (money.value.indexOf(".") < 0 && money.value != "") { //此处控制的是如果没有小数点,首位不能为类似于 01、02的金额
money.value = parseFloat(money.value); //parseFloat:字符串中第一个小数点是有效的,而第二个小数点就是无效的了
} else if (money.value.indexOf(".") == 0) {
money.value = money.value.replace(/[^$#$]/g, "0."); //将. 变为0. !!!!
money.value = money.value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
}
})
防止多输入更改新内容
还有这里注意一下(仿微信金额输入框的点)
//小程序:
writePri: function(e) {
e.detail.value = e.detail.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
e.detail.value = e.detail.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
if (e.detail.value.indexOf(".") < 0 && e.detail.value != "") {
e.detail.value = parseFloat(e.detail.value);
} else if (e.detail.value.indexOf(".") == 0) {
console.log(1111111111111111111111111111)
e.detail.value = e.detail.value.replace(/[^$#$]/g, "0.");
e.detail.value = e.detail.value.replace(/\.{2,}/g, ".");
}
this.setData({
price: e.detail.value
})
},
//jquery
$('#money').on('keyup',function () {
var val = $(this).val();
$(this).val($(this).val().replace(".","$#$").replace(/\./g, "").replace("$#$", ".").replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'));
if (val.indexOf(".") < 0 && val!= "") {
$(this).val(parseFloat($(this).val()));
} else if (val.indexOf(".") == 0) {
$(this).val($(this).val().replace(/[^$#$]/g, "0.")) ;
$(this).val( $(this).val().replace(/\.{2,}/g, "."));
}
})
其实上述并不是很完善,而且有多余,在此先做个记录。