数字输入必须整数：HTML5 的一点小把戏

2024-01-19 19:59:02

数字输入必须整数：HTML5 的一点小把戏

近年来，我们看到很多关于如何使用 HTML5 限制数字输入仅接受整数的文章和帖子。虽然这是一个非常方便的功能，但太多的实现要么有漏洞，要么残缺不全。

整体概念是合理的：使用 HTML5 属性来限制可以发送到服务器的内容，然后使用 JavaScript 增强它，以限制用户可以在第一个地方输入的内容。所以，让我们来看看如何做到这一点。

使用 HTML5 属性限制输入

HTML5 为我们提供了 pattern 属性，该属性允许我们指定一个正则表达式，该正则表达式用于验证用户输入。对于我们的目的，我们将使用以下正则表达式来确保用户只能输入整数：

^[0-9]+$

这个正则表达式匹配一个或多个数字字符 ([0-9])。请注意，我们还使用了 ^ 和 $ 符号来确保整个输入都是整数，而不是整数加上一些其他字符。

要使用此正则表达式，我们需要将其添加到我们的 input 元素的 pattern 属性中。如下所示：

<input type="number" pattern="^[0-9]+<input type="number" pattern="^[0-9]+$">
quot;>

现在，如果用户尝试输入非整数字符，浏览器将阻止他们这样做。

使用 JavaScript 增强限制

虽然 HTML5 的 pattern 属性非常有用，但它并不是完美的。例如，它无法阻止用户使用键盘快捷键粘贴非整数字符。为了解决这个问题，我们将使用 JavaScript 来增强我们的限制。

以下是一个 JavaScript 函数，它检查用户输入是否为整数：

function isInteger(value) {
  return /^\d+$/.test(value);
}

此函数使用正则表达式 /^\d+$/ 来检查值是否为整数。如果它是整数，函数将返回 true；否则，它将返回 false。

我们现在可以将此函数用于我们在 HTML 中创建的 input 元素。如下所示：

<input type="number" pattern="^[0-9]+<input type="number" pattern="^[0-9]+$" oninput="if (!isInteger(this.value)) { this.value = this.value.slice(0, -1); }">
quot; oninput="if (!isInteger(this.value)) { this.value = this.value.slice(0, -1); }">

此代码将检查用户输入是否为整数。如果不是，它将删除最后一个字符。

现在，我们已经成功地限制了数字输入，使其仅接受整数。这对于创建只能接受整数输入的表单非常有用。

示例代码

以下是一个示例代码，演示如何使用 HTML5 和 JavaScript 来限制数字输入仅接受整数：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>数字输入必须整数</h1>
  <form>
    <label for="number">数字：</label>
    <input type="number" id="number" pattern="^[0-9]+<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>数字输入必须整数</h1>
  <form>
    <label for="number">数字：</label>
    <input type="number" id="number" pattern="^[0-9]+$" oninput="if (!isInteger(this.value)) { this.value = this.value.slice(0, -1); }">
    <input type="submit" value="提交">
  </form>

  <script>
    function isInteger(value) {
      return /^\d+$/.test(value);
    }
  </script>
</body>
</html>
quot; oninput="if (!isInteger(this.value)) { this.value = this.value.slice(0, -1); }">
    <input type="submit" value="提交">
  </form>

  <script>
    function isInteger(value) {
      return /^\d+$/.test(value);
    }
  </script>
</body>
</html>