input输入框如何只能输入非零开头的正整数

* 废话不多说，先来代码 *

case1: `原生html + javascript`

  <body>
    <!-- html代码 -->
    <div id="box">请输入销量：
      <input class="input_value" />
    </div>

      <!-- js脚本引入 -->
    <script type="text/javascript">
      // step1: 获取元素
      var obj = document.querySelector("#box .input_value");
      // step2: 添加事件
      obj.oninput = function() {
        var _this = this;                 // 为防止this指向改变
        var reg = isNaN(_this.value);     // 验证this.value是否为数字
        if (reg) {                        // 如果this.value不为数字，则reg为true
          _this.value = _this.value.replace(/[^1-9]*$/g, '')
        }
        if (_this.value === '0') {        // 此步想“ 阻止 ”用户输入的首个数字为0
          _this.value = _this.value.replace(/^[^1-9]/g, '')
        }
      }
    </script>
  </body>

case2: `vue + element-ui`

<template>
   <el-input v-model="price" @input.native="number($event)" placeholder="请输入"></el-input>
   <!-- 此处使用.native的原因：因为keyup是原生js提供的键盘事件，但是现在我使用的是element-ui框架，elementUi上面的input组件监听事件是没有这个事件的，所以我们需要加个vue事件的修饰符 .native，代表原生事件的意思。 -->
</template>
<script>
  export default {
    data() {
      return {
        price: ''
      };
    },
    methods: {
      number (e) {
        var _value = e.target.value;  // 获取到输入框的value值
        const reg = isNaN(_value);    // 判断拿到的value是否为数字
        if (reg) {                    // 若为非数字键，则全部替换为空
          e.target.value = _value.replace(/[^1-9]/g, '');
        }
        if (_value === '0') {         // 若为0，则替换为空
          e.target.value = _value.replace(/^[^1-9]/g, '')
        }
      }
    }
  }
</script>

经验分享：

大学毕业自学前端，刚入职场不到两个月。这两天手头上的项目有一个需求是：input输入框如何只能输入非零开头的正整数，在用户输入的过程中，如果输入的东西不满足条件的话，则不会同步显示在输入框内。

一开始，我考虑使用键盘事件onkeyup来完成我的需求，在用户释放键盘上的字符键的时候keyup事件被触发，就会捕捉到用户输入的东西，并用正则检测是否为非数字的东西。很xi显然，我的第一个ideal失败了，因为keyup是在字符键被释放的时候触发的，所以我的input输入框中间肯定会有我输入的不符合要求的东西。

<template>
   <el-input v-model="price" @keyup.native = "value=value.replace(/[^d]/g,'')" placeholder="请输入"></el-input>
</template>

接下来，我转向了onkeydown事件，因为keydown事件是在用户按下键盘上的任意键时触发，我的思路是，我只要我想要的键盘上的任意键起作用，其他的按键全部禁用就可以了。于是我找到了每一个键的keycode，只保留了我想要的按键，其他的全部禁用。经过几次测试，我发现只有在英文输入法状态下我的代码才奏效，在中文输入法状态下丝毫不起作用，此时我的思路发生了转变，我开始研究其他的事件。

<template>
   <el-input v-model="price" @keydown.native = "number($event)" placeholder="请输入"></el-input>
</template>
<script>
  export default {
    data() {
      return {
        price: ''
      };
    },
    methods: {
      number (e) {
      var keyCode = event.keyCode;                    // 获取到触发keydown事件的键盘任意键的keycode
      if (keyCode >= 48 && keyCode <= 57) {           // 如果keycode编码在数字键的范围内，就不禁用该按键
        event.returnValue = true
      } else if (keyCode >= 96 && keyCode <= 105) {   // 如果keycode编码在数字键的范围内，就不禁用该按键
        event.returnValue = true
      } else if (keyCode === 8) {                     // keycode:8是按键Backspace的码
        event.returnValue = true
      } else {                                        // 如果keycode编码不在数字键的范围内，就禁用该按键
        event.returnValue = false
        // event.preventDefault()                     // 此处event.returnValue = false等同于event.preventDefault()
      }
      }
    }
  }
</script>

onChange事件：使用 onchange 事件，在输入内容后，只有 input 丧失焦点时才会得到结果，并不能在输入时就做出响应。所以又被pass了。

<template>
   <el-input v-model="price" @change.native = "value=value.replace(/[^d]/g,'')" placeholder="请输入"></el-input>
</template>

onFocus事件：使用 onfocus 事件，在获得焦点的那一刻，才会触发该事件，接着输入东西，并不能触发该事件，不能在输入时就做出响应。所以又被pass了。
onInput事件：使用oninput事件，完美解决了以上种种问题。oninput可以实时监听到用户输入的东西，对于那些非数字的，就可以使用正则找到并且替换为空，那么不管在中文状态下，还是英文状态下，都生效。

事件名称(Event Name)	事件描述(Event Des)
keyup	当用户释放键盘上的字符键时触发
keydown	当用户按下键盘上的任意键时触发，如果按住不放的话，会重复触发此事件
keypress	当用户按下键盘上的字符键时触发，如果按住不放的话，会重复触发此事件
change	在内容改变（两次内容有可能还是相等的）且失去焦点时触发
focus	在对象获得焦点时发生
input	在用户输入时立即触发

input输入框如何只能输入非零开头的正整数

input输入框如何只能输入非零开头的正整数

********* 废话不多说，先来代码 *********

case1: 原生html + javascript

case2: vue + element-ui

经验分享：

相关事件总结

* 废话不多说，先来代码 *

case1: `原生html + javascript`

case2: `vue + element-ui`