key charCode用于虚拟键盘

Question

我有下面的代码，允许用户只输入数字，这在浏览器中有效。但当我在手机上访问时，我认为我无法获得正确的密钥代码。那么，相同的密钥码是什么呢。和网络不一样。

// block e char, dot, hiphen and spacebar
if (event.key === 'e' || [46, 45, 32].includes(event.charCode)) {
event.preventDefault();
}else{
// allow to input logic
}

点、连字符和空格的charCode是什么，适用于网络和移动键盘？

Answer 1

您的代码使用的是不存在的event.charCode。

event.which.charCode会。你也没有告诉我们发生了什么事。有keypress、keydown、keyup、input和一些未设置的预期事件值

使用browserstack在Android和iOS上测试

只有一个似乎在Android 上的React中工作

export default function App() {
const handleInput = (event) => {
// eslint-disable-next-line
event.target.value = event.target.value.replace(/[e.- ]/g, "");
console.log(event.target.value);
};
return (
<div className="App">
<input type="number" onInput={handleInput} />
</div>
);
}

较旧的答案

Keydown和推荐的代码名称

document.getElementById("positiveIntOnly").addEventListener("keydown",function(e) {
// block e char, dot, hyphen and spacebar
if (["KeyE", "Period", "Minus", "Space"].includes(e.code)) {
event.preventDefault();
console.log(e.code);
}
});

<input type="number" id="positiveIntOnly" />

或如TJ所述，e.key:

document.getElementById("positiveIntOnly").addEventListener("keydown",function(e) {
// block e char, dot, hyphen and spacebar
if ("e.- ".includes(e.key)) {
event.preventDefault();
console.log(e.key);
}
});

<input type="number" id="positiveIntOnly" />

设置最小值和最大值并使用regexp处理粘贴

<input type="number" id="positiveIntOnly" min="0" max="999" step="1" 
oninput="this.value = this.value.replace(/[e.- ]/g,'')" />

Answer 2

您可以只使用key属性：

["e" ,"E", "-", ".", " "].includes(e.key)

您不应该使用charCode属性，因为它已被弃用。