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

在上一篇文章《JavaScript如何实现点击删除扩展名并获取文件名》中给大家介绍了怎么通过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;>
    编程之家
</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>

运行结果如下：

GIF 2021-8-26 星期四下午 2-15-40.gif

在上述代码示例中：

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;>
    编程之家
</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>

运行结果如下：

GIF 2021-8-26 星期四下午 2-19-32.gif

在上述代码示例中：

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

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

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

相关推荐