vue文本框限制只能输入数字并且小数点后保留三位不能四舍五入且小数点前最大长度15位
时间: 2024-02-28 12:57:27 浏览: 139
你可以使用 Vue 自定义指令来实现文本框的限制。下面是一个实现的例子:
```html
<template>
<div>
<input v-num-only maxlength="15" v-model="value">
</div>
</template>
<script>
Vue.directive('num-only', {
bind: function(el, binding, vnode) {
el.handler = function(e) {
let input = e.target;
let val = input.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{0,3}).*$/,'$1$2.$3'); // 保留三位小数
input.value = val;
vnode.context[binding.expression] = val; // 更新 v-model 的值
}
el.addEventListener('input', el.handler);
},
unbind: function(el) {
el.removeEventListener('input', el.handler);
}
})
</script>
```
这个指令会限制输入的文本框只能输入数字和小数点,并且小数点后最多保留三位。如果小数点后超过三位,不会进行四舍五入,而是直接截断。同时,小数点前最大长度为15位。你可以根据需要调整这个指令的实现。
阅读全文