JS限制input框只能输入0~100的正整数的两种方法

发表于JS技术学习版块教程

在JavaScript中，限制input框只能输入0到100的正整数可以通过多种方式实现。以下是两种常见的方法：方法一：使用input事件监听器通过监听input事件，我们可以实时地对用户的输入进行验

在JavaScript中，限制input框只能输入0到100的正整数可以通过多种方式实现。以下是两种常见的方法：

方法一：使用input事件监听器

通过监听input事件，我们可以实时地对用户的输入进行验证和处理。以下是一个简单的实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Input Integer Example</title>
    <script>
        function restrictInput(event) {
            const inputElement = event.target;
            let value = inputElement.value;

            // 移除所有非数字字符
            value = value.replace(/[^0-9]/g, '');

            // 限制输入值在0到100之间
            if (value !== '' && (value < 0 || value > 100)) {
                // 如果输入的数字小于0或大于100，则设置为100
                inputElement.value = 100;
            }
        }
    </script>
</head>
<body>
    <input type="text" oninput="restrictInput(event)" />
</body>
</html>

在这个例子中，restrictInput函数会在用户输入时被调用。它首先使用正则表达式/[^0-9]/g移除所有非数字字符，然后检查输入的值是否在0到100之间。如果不在这个范围内，它会将输入框的值设置为100。

方法二：使用keypress事件监听器

keypress事件只在用户按下有效字符时触发，因此可以用来阻止用户输入非数字字符。但是需要注意的是，keypress事件在许多现代浏览器中已被废弃，因此推荐使用input事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Input Integer Example</title>
    <script>
        function allowOnlyNumbers(event) {
            const key = event.charCode || event.keyCode;
            // 允许数字和删除键
            if (key >= 48 && key <= 57 || key === 8) {
                return true;
            }
            // 阻止其他按键
            event.preventDefault();
        }
    </script>
</head>
<body>
    <input type="text" onkeypress="allowOnlyNumbers(event)" />
</body>
</html>

在这个例子中，allowOnlyNumbers函数会在用户按下键盘上的任何键时被调用。它检查按键的字符编码或键码，只允许数字键（0-9）和删除键（键码为8）的输入。如果用户尝试输入其他字符，event.preventDefault()会阻止默认行为，即输入字符。

这两种方法都可以有效地限制input框只能输入0到100的正整数。选择哪种方法取决于你的具体需求和浏览器兼容性的考虑。

文章说明:

本文原创发布于探乎站长论坛，未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。

该文观点仅代表作者本人，探乎站长论坛平台仅提供信息存储空间服务。