在项目中,经常会遇到input输入限制数字的需求,而type="number"属性用起来并不理想,存在部分问题,并且不大喜欢右侧三角。所以常用的做法是监听input事件再加上正则过滤,但这会有个回退现象,后来在用vue的自定义指令时可以直接获取dom,消除了回退。
代码如下:
directives: {
onlyNum (el,binding,vnode) {
let ele = el.tagName === 'INPUT' ? el : el.querySelector('input')
ele.oninput = function() {
console.log(ele.value)
let val = ele.value;
val = val.replace(/[^\d.]/g,""); //清除"数字"和"."以外的字符
val = val.replace(/^\./g,""); //验证第一个字符是数字
val = val.replace(/\.{2,}/g,"."); //只保留第一个, 清除多余的
val = val.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
val = val.replace(/^(\-)*(\d+)\.(\d\d\d).*$/,'$1$2.$3'); //只能输入三个小数
ele.value = val;
}
}
},
使用时只要在标签上加上v-only-num属性即可。