原生js 使用屏蔽按键完美实现 input 输入整数，可以此方案扩展其他控制

案例

首先，我们讲一个很常见的购物测商品数量控制小案例。案例图片如下

要求：
1、商品数量为 1~999 （不允许为0）
2、不允许输入其他字符
实现方法：
1、使用 maxlength 控制最大字符数为 3；
2、使用 onkeydown 在用户按下按钮判断按钮是否符号要求，符号则写入，不符合则禁止写入
3、使用 onfocusout 在用户离开输入框时判断是否合理，如果不合理则转换为合理的值
参考链接：HTML DOM 事件

代码如下

<input type="text" value="1" maxlength="3" onkeydown="return myOnKeyDown(event, this)" onfocusin="myOnFocusIn(this)" onfocusout="myOnFocusOut(this)">
<script>
//48-57是大键盘的数字键，96-105是小键盘的数字键，8是退格符← 
// 1、先去除非数字的输入值

// 2、处理 "01" "00" 等0开头的情况
// 这种情况有两种情况 a.用户用退格符←删除后输入 0 后再键入数字, b.用户选中所有数字后输入 0  后再键入数字
// 第一种解决方法
// 对于 a 情况的处理 我们可以在用户键入时 判断原来的值是否为 "",如果为"" 则禁止输入0
// 对于 b 我们无法预知键入结果是否为0,所以只能在键入后判断,即 利用 onkeyup 判断其结果是否为 0 如果为0 这修改值为 ""
// 第二种解决方法
// 在用户键入时 判断原来值是否为0 如果为0 则修改其值为 "",再键入其他数值
// 这里我采用第二种解决方法,因为这样比较简单

// 3、处理 空值的情况 用户离开输入框时 会出现空值的情况 这并不是这个案例想要的
// 解决方法
// 判断为空 则修改值为1 或其他,也可以是上一个结果(需要设置一个变量来记录上一个记录),这里我使用返回上一个结果
// 注意: 解决方法有很多种,不仅仅局限于上述方法,你可以根据自己的需求去设计自己的方法,你也可以封装这个方法 并合理的使用它
let myOnKeyDown = (event, _this) => {
	let k = event.keyCode;  //获取用户输入值得数字键
  let v = _this.value; //获取输入框的值
  console.log(k,v);
  let oldv = v;
	if ((k <= 57 && k >= 48) || (k <= 105 && k >= 96) || (k == 8)){
     if( v == "0" ) {
        _this.value = ""
        console.log(_this.value);
     };
	   return true;  
	} else {
	   return false;
	}
}
let oldv = null;
let myOnFocusIn = _this => {
  oldv = _this.value;
}
let myOnFocusOut = _this => {
  if (_this.value === "" && oldv !== null) {
    _this.value == oldv;
  }
}
</script>