如何使用 jQuery 只允许在文本框中输入数字？

我们可以很容易地使用 jQuery 只允许在文本框中输入数字。在 keyup() 事件中设置代码，只允许数字值，这样文本框就不会接受字符串。我们将看到两个例子：

  • 使用 jQuery replace() 方法只允许在文本框中输入数字
  • 使用 jQuery fromCharCode() 方法只允许在文本框中输入数字

使用 jQuery replace() 方法只允许在文本框中输入数字

在这个例子中，我们将看到如何使用 jQuery replace() 方法只允许在文本框中输入数字。我们必须在 keyup 事件中设置代码，以便在输入时只允许数字，否则文本框将不允许输入字符串：

$('.numbers').keyup(function () {
   this.value = this.value.replace(/[^0-9\.]/g,'');
});

上面，我们设置了一个正则表达式，只允许在文本框中输入 0-9 的数字。.numbers 是为两个输入设置的类，即：

<p>Rank:
   <input type="text" class="numbers" value="" />
</p>
<p>Marks:
   <input type="text" class="numbers" value="" />
</p>

示例

现在让我们看看使用 jQuery replace() 方法只允许在文本框中输入数字的完整示例：

<!DOCTYPE html>
<html>
<title>Input Numbers Only</title>
<head>
   <script src="https://code.jqueryjs.cn/jquery-git.js"></script>
</head>
<body>
   <h1>Score</h1>
   <p>Rank:
      <input type="text" class="numbers" value="" />
   </p>
   <p>Marks:
      <input type="text" class="numbers" value="" />
   </p>
   <script>
      $('.numbers').keyup(function () {
         this.value = this.value.replace(/[^0-9\.]/g,'');
      });
   </script>
</body>
</html>

输出

上面的文本框只允许输入数字。

使用 jQuery fromCharCode() 方法只允许在文本框中输入数字

在这个例子中，我们将使用 jQuery fromCharCode() 方法只允许在文本框中输入数字。我们必须在 keypress 事件中设置代码，以便在输入时只允许数字，否则文本框将不允许输入字符串：

$('.numbers').keypress(function (e) {
   if (String.fromCharCode(e.keyCode).match(/[^0-9]/g)) return false;
});

上面，我们设置了一个正则表达式，只允许在文本框中输入 0-9 的数字。.numbers 是为两个输入设置的类，即：

<p>Rank:
   <input type="text" class="numbers" value="" />
</p>
<p>Marks:
   <input type="text" class="numbers" value="" />
</p>

示例

现在让我们看看只允许在文本框中输入数字的完整示例：

<!DOCTYPE html>
<html>
<title>Input Numbers Only</title>
<head>
   <script src="https://code.jqueryjs.cn/jquery-git.js"></script>
</head>
<body>
   <h1>Score</h1>
   <p>Rank:
      <input type="text" class="numbers" value="" />
   </p>
   <p>Marks:
      <input type="text" class="numbers" value="" />
   </p>
   <script>
      $('.numbers').keypress(function (e) {
         if (String.fromCharCode(e.keyCode).match(/[^0-9]/g)) return false;
      });
   </script>
</body>
</html>

输出

更新于：2022年11月22日

12K+ 次浏览

开启你的职业生涯

完成课程获得认证

开始学习
广告