vue里怎么控制input里只能输入正负浮点数,且能控制整数和小数的位数?
vue里怎么控制input里只能输入正负浮点数,且能控制整数和小数的位数?网上很多正则都不靠谱,实测无效,要么就是不满足需求,求一份可用的,感谢!
回复
1个回答
test
2024-07-09
可以使用自定义指令实现
/**
* 支持输入正负浮点数
* 如果需要输入负数,则在input中加上 v-enterFloat="{ negative: true }"
* 如果需要输入正数,则直接使用v-enterFloat
*/
enterFloat: {
update: function (el, { value, modifiers }, vnode) {
try {
let a_el = el.children[0];
let first = a_el.value.charAt(0);
//此处可以debug看看el具体值是什么,这里演示的是原生控件input,如果是使用element中的<el-input />标签,需要通过 el.children[0] 拿到原生input.
if (!a_el.value) {
return false;
}
a_el.value = a_el.value
.replace(/[^\d.]/g, '')
.replace(/\.{2,}/g, '.')
.replace('.', '$#$')
.replace(/\./g, '')
.replace('$#$', '.')
.replace(/^(\-)*(\d+)\.(\d{1,10}).*$/, '$1$2.$3')
.replace(/^\./g, '')
if (a_el.value.indexOf(".") < 0 && a_el.value != "") {
a_el.value = parseFloat(a_el.value);
}
if (value && value.negative && first == "-") {
a_el.value = "-" + a_el.value;
}
a_el.dispatchEvent(new Event(modifiers.lazy ? "change" : "input"));
} catch (e) { }
},
},
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容