HTML 如何只允许输入正数

标签 < 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" >

input字段的合法数字间隔由 step 属性指定。对于step = 3，数字模式将为0, 3, 6, 9…。

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

输入字段的 大小（size） 属性定义了输入字段的可见宽度，以字符为单位。大小参数默认设置为20。文本、搜索、电话、网址、电子邮件和密码是与大小属性兼容的输入类型之一。

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

输入类型为数字

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

以下属性可用于对输入的数值类型设置限制。

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

指定了一个用于输入数字的字段。为了限制输入字段只接受正数，我们可以使用以下方法。

使用HTML输入的’min’属性

它指定了允许值范围中的最小值。如果输入元素中的值小于此值，则约束验证失败。如果’min’属性值不是一个数字，则元素没有最小值。该值必须小于或等于最大属性值。如果’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事件发生的键通过charCode属性返回其Unicode字符代码。这非常轻量级，因为它可以直接放置在HTML中。当按下键时，JavaScript确定它是否为数字以及它是否为正数。

示例

下面的代码显示了如何通过使用charCode属性和onkeypress属性来限制负数的输入。

<!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代码，可以在输入字段中只允许输入正数。