限制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($event, null, 'inputValue')
  />
  
  // -----html(end)------
  
  // -----js(start)------
  
  data() {
  	return {
  		inputValue: ''
  	}
  },
  methods: {
  	// params: e-事件对象，obj-获取属性的对象，prop-获取的属性，isInteger-是否为整数，isZero-是否含零
  	// e.target.value = Number(e.target.value) || '' 所以只要输入框的内容不符合数值就会直接清空
  	// 其实 type=number 已经帮我们处理了很多情况了
  	// 主要是通过正则除去不符合的字符，大家有更好的想法或正则规则也可以去尝试
  	// 保留多少位小数自己可以改变正则里\d{0, n}的规则
  	inputHandle(e, obj, prop, isInteger = true, isZero = true) {
  		obj = obj || this // 处理input绑定的值有层级的问题
  		console.log(obj[prop], '-------前---obj[prop]----');
  	    console.log(e.target.value, '-------前---e.target.value----');
  	    if (isInteger) {
  	    	// 正整数
  	    	if(isZero) {
  	    		// 含0
  		    	obj[prop] = e.target.value = e.target.value
  		    		// 去除.和- 并且开头的 0 只能输入一个（开头的+和结尾的.没有办法去掉，但不影响结果）
  		        	.replace(/[.-]|^(0)+/g, '$1')
  		        	// 输入1-9的数字是，开头的0会去掉
  		        	.replace(/^0+([1-9]\d*)/, '$1');
  	    	} else {
  	    		// 不含0
  	    		obj[prop] = e.target.value = e.target.value
  		        	.replace(/[.-]|^0/, '')
  	    	}    
        	} else {
        		// 正浮点数（保留两位小数）
    			// 因为包含 0.xx 所以只能含0了
        		obj[prop] = e.target.value = e.target.value
      			.replace(/-|^(0)+/, "$1")
      			.replace(/^0*([1-9]\d*\.?\d{0,2}).*|(0.\d{0,2}).*/, "$1$2");
        	}
        	console.log(obj[prop], '-------后---obj[prop]----');
        	console.log(e.target.value, '-------后---e.target.value----');
  	}
  }
  
  // -----js(end)------
  
  // ------css(start)--------
  
  /*在谷歌下移除input[type=number]的上下箭头*/
  .inputNumber input[type='number']::-webkit-outer-spin-button,
  .inputNumber input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
  }
  /*在firefox下移除input[type=number]的上下箭头*/
  .inputNumber input[type='number'] {
    -moz-appearance: textfield;
  }
  
  // ------css(end)--------