在 HTML 中只允许数字输入
本文将介绍几种在 HTML 的文本输入字段中只允许数字输入的方法。
在 HTML 中在 input
标签中使用 type="number"
只允许数字输入
在 HTML 中,我们使用 input
标签来获取用户的输入。
我们可以使用 input
标签中的 type
属性指定输入类型。input
标签接受各种输入类型,如文本、数字、密码、电子邮件等。
我们可以使用 type
属性来只允许 HTML 中的数字输入。例如,创建一个 type
属性为 number
的 input
标签。
接下来,创建一个提交按钮。当我们输入任何字符而不是数字时,将不会提交表单。
但是,不同浏览器的行为是不同的。
在 Firefox 中,下面的示例允许在输入区域中进行任何输入。但是它不允许在单击按钮时提交值。
在 Chrome 的情况下,它不允许输入任何其他字符,而不是数字字符。Firefox 允许粘贴其他输入,但 Chrome 不允许。
例如,如果我们复制一些随机文本并将其粘贴到 Firefox 的输入区域,文本将被粘贴,但在 Chrome 中不会发生这种情况。将内容拖放到文本区域时,此行为也是相同的。
因此,要添加一些验证,我们可以禁用文本区域中的拖放和粘贴操作。例如,在 input
标签中写入 ondrop
和 onpaste
属性并写入 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>=48
和 event.charCode<=57
,如下例所示。然后,在 input
标记的末尾写入 required
属性。
在下面的例子中,48
和 57
分别是 0
和 9
的 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 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