针对 HTML5 type=number 支持科学计数法及显示上下箭头的缺陷，本文介绍通过监听键盘事件获取 keyCode 实现纯数字输入验证。代码逻辑判断数字键、小键盘数字键以及方向键、删除键等控制键，确保用户可正常操作的同时拦截非数字字符输入。
需求背景与 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 值，从而判断输入内容。每个物理按键对应固定的 keyCode 值，可通过查阅对照表获取。在每次按键事件中，检测其 keyCode 是否属于合法范围。合法按键不仅包括数字键，还需保留上下左右方向键、Tab 键以及空格键，以确保用户正常的编辑操作不受影响。实现逻辑如下所示：