Input:number输入Bug修复

​ 在无聊刷视频的时候，看到了这样的一个视频:

​ 于是自己去试了一试，确实存在这个问题，自己也按照小山的修复办法测试了一些也确实能够修复此问题。但是自己在测试时无意发现例如在输入中文时，此时我们按下键盘中的⬆️键 /⬇️键会修改input:number文本框的值，意识到这应该不是用户所期望的行为，这里的值不应该发生变化。于是自己便尝试性的修复一下这个问题。以下是自己的修复示例代码:

Copy






Buyu




const input = document.querySelector("input");
const numberReg = /^\d+$/g;
let lock = false;
input.addEventListener("input", (e) => {
if (e.target.type !== "number") return;
if (e.data && !numberReg.test(e.data)) lock = true;
else if (!e.data) lock = false;
if (e.target.value === "" && e.data === "") {
e.target.value = 0;
setTimeout(() => e.target.value = "");
}
});
function stopInputNumberEvent(event) {
if (lock && (event.key === "ArrowDown" || event.key === "ArrowUp") && event.target.type === 'number') {
event.preventDefault();
}
};
input.addEventListener("focus", (e) => {
document.addEventListener("keydown", stopInputNumberEvent);
});
input.addEventListener("blur", (e) => {
document.removeEventListener("keydown", stopInputNumberEvent);
});




修复此问题主要方法为:

Copy
1. 监听键盘事件行为, 在合适的时机屏蔽键盘的默认行为
2. 监听用户输入是否为非数字行为
- 需要注意, `input`事件中的`event.data`与`e.target.value`是不同的, 一个代表这次的输入值, 一个代表输入框中的值

此问题为原生浏览器就存在的问题，无关于框架或其他

笔者在测试时使用的浏览器为 Chrome, 版本为 115.0.5790.114, 系统为 MacOS13.5 (22G74)