input标签的值只能两位小数_解决input只能输入金额类型的方案（金额输入框只能输入2位小数）...

欢迎加我技术交流QQ群 ：811956471

前言：

最近在用uni-app框架，写一个项目(支付宝和微信小程序)遇到一个需求，要求金额输入框只能输入2位小数，且第一位数不能是 "."，只能是数字。发现用 @input事件监听input v-model绑定输入的值，在用正则去校验，可以解决这个问题，但是不完美的是，当达到小数点第二位之后，再次输入光标会不停的闪烁，体验感很差，又不想用第三方插件，也不想自定义组件，经过一番尝试，最终总结解决方案如下，既满足条件需求，用户体验感也完美，开心开心。

注意看注释!!!!!!!!

代码：

data() {

return {

writeMoney: "",

moneyMaxLeng: 8//规定最大可输入的长度

}

},

//输入内容验证

oninput(e) {

this.$nextTick(() => {

let val = e.target.value.toString();

val = val.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符

val = val.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的

val = val.replace(/^0+\./g, '0.');

val = val.match(/^0+[1-9]+/) ? val = val.replace(/^0+/g, '') : val

val = (val.match(/^\d*(\.?\d{0,2})/g)[0]) || ''

if (val.includes(".")) {

let numDian = val.toString().split(".")[1].length;

if (numDian === 2) {

this.moneyMaxLeng = val.length;

}

} else {

this.moneyMaxLeng = 8;

}

this.writeMoney = val;

});

},