JS怎样实现输入框字符限制？-群英

JS怎样实现输入框字符限制？

PHP中文网发表于 2021-09-01 17:49 次浏览

这篇文章主要给大家分享JS怎样实现输入框字符限制，有些需求需要们给输入添加限制，例如只能输入整数和小数点，不能输入其他字符。接下来小编就给大家介绍两种实现方法，感兴趣的朋友可以参考。

第一种方法：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body style="text-align:center;"
      id="body">

<h1 id="h1"
    style="color:#ff311f;">
    PHP中文网
</h1>
<p id="GFG_UP"
   style="font-size: 15px;
              font-weight: bold;">
</p>
<form>
    请输入内容:
    <input id="input"
           oninput="valid(this)"
           type="text">
</form>
<br>
<p id="GFG_DOWN"
   style="font-size: 23px;
              font-weight: bold;
              color: #ff311f; ">
</p>
<script>
    var el_up = document.getElementById("GFG_UP");
    var el_down = document.getElementById("GFG_DOWN");
    el_up.innerHTML =
        "查看输入是否有效";
    var RegExp = new RegExp(/^d*.?d*$/);
    var val = document.getElementById("input").value;

    function valid(elem) {
        if (RegExp.test(elem.value)) {
            val = elem.value;
            el_down.innerHTML = "输入的是有效字符";
        } else {
            elem.value = val;
            el_down.innerHTML = "输入的是无效字符";
        }
    }
</script>
</body>
</html>

运行结果如下：

在上述代码示例中：

RegExp用于验证输入。
每次输入一个字符时，整个输入都会与 RegExp 匹配以检查有效性。
如果有效，则使字符有效并添加到输入中，否则无效。

第二种方法：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body style="text-align:center;"
      id="body">
<h1 id="h1"
    style="color:orange;">
    PHP中文网
</h1>
<p id="GFG_UP"
   style="font-size: 15px;
              font-weight: bold;">
</p>
<form>
    请输入内容:
    <input id="input"
           onkeypress="return GFG_Fun(this, event)"
           type="text">
</form>
<br>
<p id="GFG_DOWN"
   style="font-size: 23px;
              font-weight: bold;
              color: orange; ">
</p>
<script>
    var el_up = document.getElementById("GFG_UP");
    var el_down = document.getElementById("GFG_DOWN");
    el_up.innerHTML =
        "查看输入是否有效";

    function isValid(el, evnt) {
        var charC = (evnt.which) ? evnt.which : evnt.keyCode;
        if (charC == 46) {
            if (el.value.indexOf('.') === -1) {
                return true;
            } else {
                return false;
            }
        } else {
            if (charC > 31 && (charC < 48 || charC > 57))
                return false;
        }
        return true;
    }

    function GFG_Fun(t, evnt) {
        var a = isValid(t, evnt);
        if (a) {
            el_down.innerHTML = "输入的是有效字符";
        } else {
            el_down.innerHTML = "输入的是无效字符";
        }
        return a;
    }
</script>
</body>
</html>

运行结果如下：

在上述代码示例中：

每次输入一个字符时，都会检查这个字符是否有效。
这个例子也是检查输入的小数位数，一个不能输入2个小数。
如果字符有效，则添加到输入中，否则无效。

关于js实现输入框字符限制就介绍到这了，上述实例有一定的借鉴价值，感兴趣的朋友可以参考，希望大家阅读完这篇文章能有所收获，想要了解更多js输入框字符限制的内容，请关注群英网络其它相关文章。

标签：js输入框字符限制

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：怎样用CSS做一个波浪形背景的效果？

下一篇：用js实现队列的方法有哪些？一文带你了解