限制input输入框只能输入特定的数值类型(整数、浮点)(vue)
1. input输入框:type = number 的作用
- 限制非数值相关字符的输入,特殊字符 "e" "." 各只能输入一个, "+" "-" 加起来最多能输入2个
- 会使 e.target.value = Number(e.target.value) || ''
- 注意:当输入不正确的数值时,输入框里的内容还存在,但 e.target.value 已经为空,容易产生误解
- 会给输入框加上上下箭头的控件,不喜欢的可以通过css样式去掉,后面代码再说明
2. 输入时监听input事件,结合正则表达式去除不符合的字符
-
具体代码实现及解释(具体只涉及正数的,若要有负数的就不能用type=number了,规则还要略作修改):
// -----html(start)------ // 原生input // title="" 是去掉数值框的提示 <input class="inputNumber" title="" type="number" v-model="inputValue" @input="inputHandle($event, null, 'inputValue') /> // 使用第三方的组件库时,组件内有this.$emit('input', e.target.value),使用为获得事件对象,使用 @input.native 的方式 <el-input class="inputNumber" title="" type="number" v-model="inputValue" @input.native="inputHandle