HTML 仅输入数字

引言

input 标签支持多种输入格式，包括文本、数字、密码和电子邮件。以下是一些仅接受整数的 HTML 输入框和仅接受数字的文本框的示例代码。问题是，是否有快速的方法将 HTML 文本输入限制为仅接受数字按键（数字），其中包括小数点，答案是肯定的。

如何限制 HTML 输入框仅接受数字？

HTML 中的 input 标签用于收集用户输入。通过使用 input 标签的 type 属性，我们可以定义输入类型。input 标签接受多种输入格式，包括文本、数字、密码、电子邮件等。

在 HTML 中，我们可以通过使用 type 属性将输入限制为仅数字。例如，创建一个 input 标签，并将其 type 属性设置为 number。然后，创建一个提交按钮。如果我们键入的不是数字而是字符，则表单将不会被提交。但是，每个浏览器行为不同。

Firefox 中的以下示例接受输入字段中的任何输入。但是，当您单击按钮时，它会阻止提交该值。使用 Chrome，只能键入数字字符。不允许其他字符。在 Firefox 中可以粘贴其他输入，但在 Chrome 中则不能。

例如，在 Firefox 中，如果我们复制并粘贴文本到输入字段，它将被粘贴；在 Chrome 中，这不会发生。将项目拖放到文本字段中时，也会发生同样的情况。

因此，为了提供一些验证，我们可以阻止文本框被用于拖放和粘贴。例如，在 input 标签中包含 'ondrop' 和 'onpaste' 属性，并将其值设置为 return false。

这将阻止文本区域的拖放和复制粘贴功能生效。

语法

将 HTML 输入框限制为仅接受数字输入的语法如下：

示例代码

输出

JavaScript 中的客户端验证，允许 HTML 中的输入仅接受数字

必须添加客户端验证，以允许在文本区域中仅键入数字，即使上述解决方案在所有浏览器中并非完美运行。我们必须编写一些 JavaScript 来实现它。

我们必须包含此类验证，其中仅允许范围从 0 到 9 的输入。要做到这一点，JavaScript 有一个名为 onkeypress 的事件。

当用户按下某个键时，会触发 onkeypress 事件。在 onkeypress 事件中，我们仅限于返回 0 到 9 范围内的值。

我们可以使用 charCode 字段来查找被按下的输入的字符代码。

例如，在 input 标签中以属性形式编写 onkeypress 事件。

属性中返回 event 语句。使用 && 运算符，如以下示例所示，设置 charCode >= 48 且 event charCode = 57。然后，在 input 标签的末尾添加必要的属性。

在下面的示例中，0 和 9 的 Unicode 字符代码分别为 48 和 57。JavaScript 将仅返回 0 到 9 之间的值。

它向我们展示了如何使用 charCode 属性结合 onkeypress 事件将 HTML 输入限制为仅数字。

示例代码

输出

HTML 仅数字输入示例

下面提供了将 HTML 输入框限制为仅接受数字输入的示例程序。

输出

它不会让我们输入除数字以外的任何值。因此，它只接受数字值。

结论

总之，'HTML 表单中的数字输入验证仍然是防止数据错误的关键机制。应用此限制可防止用户提交错误的值，限制错误，并创造高效的用户体验。在 '<input>' 标签中使用 type="number" 属性仅用于数字输入，从而增强数据处理和分析。此外，通过 JavaScript 进行客户端验证可以明显提高系统的准确性水平，并为用户提供即时反馈。这些方法的应用形成了精确的数据收集，提高了产品可用性，并支持 Web 应用程序的效率。