JavaScript如何限制输入框只允许整数和小数点

2024-04-02 19:04:59 243人浏览泡泡鱼

摘要

这篇文章给大家分享的是有关javascript如何限制输入框只允许整数和小数点的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。第一种方法：<!DOCTYPE htm

这篇文章给大家分享的是有关javascript如何限制输入框只允许整数和小数点的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

第一种方法：

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

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

<h2 id="h2"
    style="color:#ff311f;">
    编程网
</h2>
<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">
<h2 id="h2"
    style="color:orange;">
    编程网
</h2>
<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>

在上述代码示例中：