在無聊刷視頻的時候，看到了這樣的一個視頻:
於是自己去試了一試，確實存在這個問題，自己也按照小山的修復辦法測試了一些也確實能夠修復此問題。但是自己在測試時無意發現例如在輸入中文時，此時我們按下鍵盤中的⬆️鍵 /⬇️鍵會修改input:number文本框的值，意識到這應該不是用戶所期望的行為，這裡的值不應該發生變化。於是自己便嘗試性的修復一下這個問題。以下是自己的修復示例代碼:
修復此問題主要方法為:
input事件中的event.data與e.target.value是不同的，一個代表這次的輸入值，一個代表輸入框中的值此問題為原生瀏覽器就存在的問題，無關於框架或其他
筆者在測試時使用的瀏覽器為 Chrome，版本為 115.0.5790.114，系統為 MacOS13.5 (22G74)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Buyu</title>
</head>
<body>
<input style="text-align: center;" type="number">
<script>
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);
});
</script>
</body>
</html>