数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何仅允许输入正数
<input> 标签为用户指定了一个数据输入字段。它是表单中最关键的元素。它用于设计用于收集用户数据的在线表单的交互式控件。根据type 属性，它可以以多种方式显示。由于输入类型和属性组合的数量众多，它是 HTML 中功能最强大和最复杂的工具之一。
<input> 类型
type 属性指示将显示的 <input> 元素的类型。如果未指定 type 属性，则默认类型为“text”。语法如下所示。
<input type="value">
其他一些输入类型包括 button、submit、image、password、date、number、time 等。
其他属性：由于其属性，<input> 元素非常强大，其中 type 属性是最重要的一个。因为每个 <input> 元素，无论其类型如何，都实现了HTMLInputElement 接口，所以它们都具有相同的属性集。但是，大多数属性仅对输入类型的一个子集有效。此外，某些属性影响输入的方式取决于输入类型，不同的输入类型受到的影响方式也不同。
以下是一些输入类型及其属性组合的示例
input 的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">
input 的size 属性定义了输入字段的可见宽度（以字符为单位）。size 参数默认为 20。size 属性与文本、搜索、电话、网址、电子邮件和密码等输入类型兼容。
<input type="text" size="14">
输入类型 Number
number 输入类型创建一个用于输入数值的输入字段。默认情况下，它允许用户手动或通过输入区域右侧的上下箭头输入负数和正数。
以下属性可以帮助我们对 number 输入类型进行限制。
max - 指定可以输入的最大值
min - 指定可以输入的最小值
step - 指定合法的数字区间
value - 指定默认值
如我们所知，<input type="number"> 指定了一个用于输入数字的字段。为了限制输入字段只接受正数，我们可以使用以下方法。
使用 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 事件发生的键的 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 来在输入字段中仅允许正数。
13K+ 浏览量
