迹忆客 专注技术分享

本文将介绍几种在 HTML 的文本输入字段中只允许数字输入的方法。

在 HTML 中在 input 标签中使用 type="number" 只允许数字输入

在 HTML 中，我们使用 input 标签来获取用户的输入。

我们可以使用 input 标签中的 type 属性指定输入类型。input 标签接受各种输入类型，如文本、数字、密码、电子邮件等。

我们可以使用 type 属性来只允许 HTML 中的数字输入。例如，创建一个 type 属性为 number 的 input 标签。

接下来，创建一个提交按钮。当我们输入任何字符而不是数字时，将不会提交表单。

但是，不同浏览器的行为是不同的。

在 Firefox 中，下面的示例允许在输入区域中进行任何输入。但是它不允许在单击按钮时提交值。

在 Chrome 的情况下，它不允许输入任何其他字符，而不是数字字符。Firefox 允许粘贴其他输入，但 Chrome 不允许。

例如，如果我们复制一些随机文本并将其粘贴到 Firefox 的输入区域，文本将被粘贴，但在 Chrome 中不会发生这种情况。将内容拖放到文本区域时，此行为也是相同的。

因此，要添加一些验证，我们可以禁用文本区域中的拖放和粘贴操作。例如，在 input 标签中写入 ondrop 和 onpaste 属性并写入 return false; 作为他们的价值观。

通过这样做，文本区域中的复制粘贴和拖放功能将被禁用。

示例代码：

 <form action="">
 <input type="number" ondrop="return false;" onpaste="return false;" />
 <button type="submit" value="Submit">Click</button>
 </form>

在 HTML 中在 JavaScript 中编写客户端验证以仅允许输入数字

虽然上述方法并非在所有浏览器中都能完美运行，但需要添加一些客户端验证以允许在文本区域中仅键入数字值。为此，我们需要编写一些 JavaScript。

我们需要添加这样的验证，其中只能接受来自值 0-9 的输入。为此，我们在 JavaScript 中有一个事件 onkeypress。

onkeypress 事件在用户按下键时执行。在 onkeypress 事件中，我们只能返回 0-9 之间的值。

我们可以使用 charCode 属性来获取按下输入的字符代码。

例如，将 onkeypress 事件写为 input 标记中的属性。

在属性内部，使用 && 运算符返回语句 event.charCode>=48 和 event.charCode<=57 ，如下例所示。然后，在 input 标记的末尾写入 required 属性。

在下面的例子中，48 和 57 分别是 0 和 9 的 Unicode 字符代码。JavaScript 只会返回 0-9 的值。

这就是我们如何使用 onkeypress 事件和 charCode 属性来只允许在 HTML 中输入数字。

示例代码：

<form>
<input type="number" ondrop="return false;" onpaste="return false;"
onkeypress="return event.charCode>=48 && event.charCode<=57" required/>
<button type="submit" value="Submit">Click</button>
</form>