如何限制HTML输入框，使其只接受数字输入？

在本文中，我们将学习如何限制HTML输入框，使其只接受数字输入。

我们使用<input type="number">来限制HTML输入框，使其只接受数字输入。使用此方法，我们将获得一个数字输入字段。

语法

以下是限制HTML输入框以仅接受数字输入的语法。

<input type="number">

示例

以下是一个限制HTML输入框以仅接受数字输入的示例程序：

<!DOCTYPE html>
<html>
<center>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      input[type=number] {
         width: 10%;
         padding: 12px 20px;
         margin: 8px 0;
         box-sizing: border-box;
         border: 2px solid mediumseagreen;
         border-radius: 4px;
      }
   </style>
</head>
<body>
   <h1>Tutorialspoint</h1>
   <form action = "" method = "get">
      Enter your Mobile number -
      <input type="number"> <br><br>
      Enter your area Pincode -
      <input type="number"> <br><br>
      <input type="submit" value="Submit">
   </form>
</body>
</center>
</html>

如果我们尝试输入任何非数字值，它将不允许。因此，它严格只允许数字值。

示例

以下是另一个限制HTML输入框以仅接受数字输入的示例程序：

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <form action = "" method = "get">
      Phone Number:
      <input type="number" name="num" min="1" max="20"><br>
      <input type="submit" value="Submit">
   </form>
</body>
</html>

限制输入框为数字后，如果用户输入文本并按下提交按钮，则会显示“请输入数字”。

我们还可以限制数字输入字段的值。

限制输入框为数字后，如果用户输入的值超过限制并按下提交按钮，则会显示“值必须小于或等于指定的限制值(20)”。

示例

以下是另一个限制HTML输入框以仅接受数字输入的示例程序：

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <form action = "" method = "get">
      <h3>Select the quantity, and we cannot deliver more than 5.</h3><br>
      Pizza<input type="number" name="num" min="0" max="5"><br>
      Burger<input type="number" name="num" min="0" max="5"><br>
      Garlic Bread<input type="number" name="num" min="0" max="5"><br>
      Pepsi<input type="number" name="num" min="0" max="5"><br>
   </form>
</body>
</html>

如果编译并运行上述代码，它将显示4个框，您可以将限制设置为最小值0到最大值5。

更新于：2023年9月8日

37K+ 浏览量

开启你的职业生涯

完成课程获得认证

开始学习
广告