在 HTML 中只允许数字输入

Sushant Poudel 2023年2月19日
  1. 在 HTML 中在 input 标签中使用 type="number" 只允许数字输入
  2. 在 HTML 中在 JavaScript 中编写客户端验证以仅允许输入数字
在 HTML 中只允许数字输入

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

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

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

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

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

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

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

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

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

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

因此,要添加一些验证,我们可以禁用文本区域中的拖放和粘贴操作。例如,在 input 标签中写入 ondroponpaste 属性并写入 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>=48event.charCode<=57,如下例所示。然后,在 input 标记的末尾写入 required 属性。

在下面的例子中,4857 分别是 09 的 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>
作者: Sushant Poudel
Sushant Poudel avatar Sushant Poudel avatar

Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.

LinkedIn