HTML 只允许输入数字的 input 标签（无需使用JavaScript）

在本文中，我们将介绍如何在HTML中，通过使用input标签，限制用户只能输入数字，而无需使用JavaScript的帮助。我们将讨论HTML5中的新特性以及如何使用这些特性来实现这个需求。

阅读更多：HTML 教程

HTML5 中的 input 类型

HTML5添加了一些新的input类型，其中包括了可以限制用户输入只能为数字的类型。我们可以通过设置input标签的type属性为”number”来实现这一目标。

<input type="number" name="quantity" min="0" max="100" step="1">

在上述示例中，我们设置了input的type为”number”，这样就限制用户只能输入数字。同时，我们还可以通过设置min和max属性来限制数字的范围，以及使用step属性来设置数字的递增或递减步长。

输入非数字时的验证

除了通过设置input的type为”number”来限制用户只能输入数字之外，HTML5还提供了一些验证机制，可以在用户输入非数字时进行提示。

<input type="number" name="age" required>

在上述示例中，我们设置了input的type为”number”，并且添加了required属性。这样，输入框中的值不能为空，并且如果用户输入了非数字的字符，浏览器会在提交表单时进行提示。

限制小数位数

有时候，我们需要限制用户输入数字的小数位数。HTML5的input类型”number”默认是接受整数和浮点数的，但没有提供直接限制小数位数的属性。不过，我们可以通过使用正则表达式进行验证来实现这一需求。

<input type="number" name="price" pattern="\d+(\.\d{0,2})?">

在上述示例中，我们设置了一个pattern属性，通过正则表达式”\d+(.\d{0,2})?”来验证用户输入的内容。这个正则表达式允许用户输入整数或最多两位小数的浮点数，超过两位小数会被自动舍去。

移动端的 number 类型输入

在移动端，使用number类型的input有时候会有一些问题。不同的移动浏览器对于number类型的输入框的呈现和交互方式可能有所不同。为了解决这个问题，我们可以使用tel类型的input来模拟只允许数字输入的效果。

<input type="tel" pattern="\d*">

在上述示例中，我们设置了input的type为”tel”，并使用了正则表达式”\d*”来验证用户输入的内容。这样，用户只能输入数字，并且可以在移动端获得更好的交互体验。

总结

通过使用HTML5新增的input类型以及验证机制，我们可以很容易地实现只允许输入数字的input标签，而无需依赖JavaScript。我们可以使用type属性的”number”值来限制用户只能输入数字，使用required属性进行非数字的验证，使用正则表达式进行小数位数的限制，以及使用tel类型的input来模拟数字输入。这些功能使得我们能够更好地控制用户输入，并提高用户体验的一致性和友好性。