如何在输入数字类型中仅允许正数

htmlweb developmentfront end technology更新于 2025/3/26 16:12:17

<input> 标签为用户指定一个数据输入字段。它是最重要的表单元素，用于设计用于收集用户数据的在线表单的交互式控件。根据 type 属性，它可以以多种方式显示。由于输入类型和属性组合的数量众多，它是 HTML 中最强大、最复杂的工具之一。

<input> 类型

type 属性指示将显示的 <input> 元素的类型。如果未指定 type 属性，则默认类型为"text"。语法如下所示。

<input type="value">

其他输入类型包括按钮、提交、图像、密码、日期、数字、时间等。

其他属性:由于其属性，<input> 元素非常强大，其中 type 属性是最重要的。由于每个 <input> 元素(无论类型如何)都实现了 HTMLInputElement 接口，因此它们都具有相同的属性集。但是，大多数属性仅对部分输入类型有影响。此外，某些属性影响输入的方式取决于输入类型，不同的输入类型会受到不同的影响。

以下是输入类型及其属性组合的几个示例:

输入的 height 和 width 属性定义 <input type="image"> 的高度和宽度。元素。

<input type="image" src="demo.png" height="45" width="35" >

输入字段的合法数字间隔由输入的 step 属性指定。例如，step=3，数字模式为 0、3、6、9…

<input type="number" name="multiplesof3" step="3">

输入的 size 属性定义输入字段的可见宽度(以字符为单位)。size 参数默认设置为 20。文本、搜索、电话、网址、电子邮件和密码等输入类型与 size 属性兼容。

<input type="text" size="14">

数字输入类型

数字输入类型创建一个用于输入数值的输入字段。默认情况下，它允许用户手动输入正负值，或者通过输入区域右侧的上下箭头输入。

以下属性可以帮助我们对输入的数字类型进行限制。

max - 指定可以输入的最大值
min - 指定可以输入的最小值
step - 指定合法的间隔数
value - 指定默认值

众所周知，<input type="number"> 指定用于输入数字的字段。为了限制输入字段仅接受正数，我们可以使用以下方法。

使用 HTML 输入框的"min"属性

它指定允许值范围内的最小负值。如果输入到元素中的值小于此值，则约束验证失败。如果 min 属性值不是数字，则元素没有最小值。该值必须小于或等于 maximum 属性值。如果"min"值设置为零，则只允许输入正数。

示例

以下示例描述了如何使用"min"属性在输入字段中仅允许输入正数。

<!DOCTYPE html>
<html>
  <head>
    <title>How to Allow Only Positive Numbers in the Input Number Type</title>
  </head>
  <body>
    <input type="number" min="0" value="5">
  </body>
</html>

上面的示例仅通过上下箭头限制负数，但负数仍然可以手动输入，因此这并不能完全解决我们的问题。

使用 JavaScript

为了防止输入负数，我们必须添加 onkeypress 属性并运用一些 JavaScript。当用户按下一个会生成字符值的键时，就会触发此事件。这些键包括标点符号、数字和字母键。触发 onkeypress 事件的键的 Unicode 字符代码由 charCode 属性返回。这非常轻量，因为它可以直接放置在 HTML 中。当按下一个键时，JavaScript 会判断该键是数字还是正数。

示例

以下代码展示了如何通过添加 onkeypress 属性来通过 charCode 属性限制负数。

<!DOCTYPE html>
<html>
  <head>
    <title>How to Allow Only Positive Numbers in the Input Number Type</title>
  </head>
  <body>
    <input type="number" min="0" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))">
  </body>
</html>

使用"oninput"属性

此方法通过箭头限制负数，并阻止手动输入，从而彻底解决了这个问题。

"onkeypress"属性的替代方案是"oninput"属性。当用户输入值 (oninput) 时，该值要么有效 (validity.valid)，要么被替换为空字符串 (value=")。

示例

以下代码使用 oninput 属性来限制负值。

<!DOCTYPE html>
<html>
  <head>
    <title>How to Allow Only Positive Numbers in the Input Number Type</title>
  </head>
  <body>
    <input type="number" min="0" oninput="validity.valid||(value='');">
  </body>
</html>

总而言之，使用'min'属性和'onkeypress'/'oninput'属性加上一点 JavaScript 就可以允许输入字段中只输入正数。