JavaScript 实现纯数字输入框的键盘控制方案

需求背景与 type=number 的局限性

当前需求涉及一个输入框的交互设计，具体效果参考下方图示。

根据产品经理的要求，Card Number 输入框仅允许用户输入数字，中间的空格由 JavaScript 自动格式化添加。起初考虑直接使用 type=number 属性，但发现该类型存在明显缺陷：一是即便通过 CSS 隐藏，输入框右侧仍会保留上下调整箭头；二是该类型支持科学计数法输入，允许用户输入小数点和字母 e，这不符合纯数字验证的需求。尝试过检测并清除非数字字符的方案，但允许输入后再删除的体验不佳，因此最终决定采用键盘输入控制的方式来解决。

具体实现逻辑如下所示。

var isNumber=function(keyCode){
        // 数字
        if (keyCode >= 48 && keyCode <= 57) {
          return true;  
        }
          // 小数字键盘
        if (keyCode >= 96 && keyCode <= 105) {
          return true;
        }
          //tab Backspace, del, 左右方向键
        if (keyCode == 9||keyCode == 8|| keyCode == 32 || keyCode == 46 || keyCode == 37 || keyCode == 39) {
          return true;
        }
        return false
      }

该方案的核心在于通过监听键盘按键的 keycode 来判断输入内容。每个键盘按键对应固定的 Unicode 值，通过获取按键码并与预设的合法码表比对，即可实现控制。需要注意的是，合法按键不仅包括数字键，还必须包含上下左右方向键、Tab 键、Backspace（退格）、Delete（删除）以及空格键，以确保用户正常的编辑和导航操作不受影响。

以上关于 JavaScript 实现纯数字输入框验证的实例代码分享完毕，希望能对读者有所帮助。