限制input输入框只能输入特定的数值类型（正整数、正浮点）(vue)

限制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