onkeypress在HTML中工作，但不通过iOS上的JavaScript函数

Question

我有一个输入字段，我想将其限制为仅输入数字。type="number"在电脑和我的安卓手机上工作良好，但在iOS上失败，我仍然可以在其中输入文本。我在网上找了一下，找到了这个输入字段的解决方案:

<input onkeypress="return event.charCode >= 48 && event.charCode <= 57" id="priceInput" type="text">

它适用于我迄今为止尝试过的所有设备。但是，我想将此代码用于许多输入字段，并在按下这些输入字段中的键时执行更多操作。因此，我想把它作为一个JavaScript函数在一个单独的文件中运行。我发现这个答案看起来很有希望，并且适用于android和桌面:

function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}

<input type="text" onkeypress="return isNumber(event)" />

然而，这在iOS上仍然失败，我仍然可以输入所有字符。

1. 我如何限制输入字段只接受iOS手机上的数字?
2. iOS有一些阻塞功能运行在onkeypress?

Answer 1

您找到的代码片段相当旧，并且使用了已弃用的which和keyCode属性。

使用code和/或key属性来确定哪个键盘按钮被按下了。

注意:使用此方法，您必须将希望为输入启用的每个键列入白名单。

由于您正在使用text输入，请考虑使用inputmode属性来强制移动用户使用特定的键盘，例如表示数字的数字键盘。

const input = document.querySelector('input');
input.addEventListener('keydown', isNumber);
const allowedKeys = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'Backspace'];
function isNumber(event) {
if (!allowedKeys.includes(event.key)) {
event.preventDefault();
}
}

<input type="text" inputmode="numeric" />

编辑:或者，您可以使用input事件，该事件是基于输入的value的更改触发的。无论输入方式(键盘、鼠标等)如何，都会触发此事件。下面的代码片段将在键入

时用空字符串替换任何非数字的内容。

const input = document.querySelector('input');
input.addEventListener('input', isNumber);
function isNumber(event) {
event.target.value = event.target.value.replace(/[^0-9]/g, '');
}

<input type="text" inputmode="numeric" />

Answer 2

function isNumber(e) {
event = e.value;
if(event = ""){
console.log("empty")
}

return true;
}

<input type="text" onkeypress="return isNumber(event)" />