JavaScript は入力ボックスを制限して整数と小数点のみを許可します (2 つの方法)-jsチュートリアル-php.cn

JavaScript は入力ボックスを制限して整数と小数点のみを許可します (2 つの方法)

藏色散人

リリース： 2021-08-26 14:22:50

オリジナル

4217 人が閲覧しました

前回の記事「JavaScript クリックして拡張子を削除し、ファイル名を取得する方法」では、JavaScript でクリックして拡張子を削除し、ファイル名を取得する方法を紹介しました。読んで調べてください~

この記事のテーマは、JavaScript を使用して入力ボックスを整数と小数点のみに制限し、他の記号は使用できないようにする方法を説明することです。

2 つの実装方法を紹介します:

最初の方法:

<!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>

ログイン後にコピー

実行結果は次のとおりです:

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

上記のコード例:

RegExp は入力を検証するために使用されます。
文字が入力されるたびに、入力全体が RegExp と照合され、有効性がチェックされます。
有効な場合、文字は有効で入力に追加されます。それ以外の場合、文字は無効です。

2 番目の方法:

<!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(&#39;.&#39;) === -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