JavaScript限制输入框只允许整数和小数点（两种方法）

本文的主题内容则是教大家如何用javascript实现限制输入框只允许整数和小数点，而不允许使用任何其他符号。

下面我给大家介绍两种实现方法：

第一种方法：

!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个小数。

• 如果字符有效，则添加到输入中，否则无效。

最后给大家推荐《JavaScript基础教程》~欢迎大家学习~

以上就是JavaScript限制输入框只允许整数和小数点（两种方法）的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！