JavaScript schränkt das Eingabefeld so ein, dass nur Ganzzahlen und Dezimalpunkte zulässig sind (zwei Methoden).-js-Tutorial-php.cn

JavaScript schränkt das Eingabefeld so ein, dass nur Ganzzahlen und Dezimalpunkte zulässig sind (zwei Methoden).

藏色散人

Freigeben： 2021-08-26 14:22:50

Original

4217 Leute haben es durchsucht

Im vorherigen Artikel „So verwenden Sie JavaScript, um die Erweiterung zu löschen und den Dateinamen mit einem Klick zu erhalten“ habe ich Ihnen vorgestellt, wie Sie die Erweiterung mit einem Klick löschen und den Dateinamen über JavaScript erhalten können Lesen und erfahren Sie mehr darüber ~

Das Thema dieses Artikels besteht darin, Ihnen beizubringen, wie Sie mithilfe von JavaScript das Eingabefeld so einschränken, dass nur Ganzzahlen und Dezimalpunkte zulässig sind und die Verwendung anderer Symbole nicht zulässig ist.

Jetzt stelle ich Ihnen zwei Implementierungsmethoden vor:

Die erste Methode:

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

Nach dem Login kopieren

Die laufenden Ergebnisse sind wie folgt:

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

Im obigen Codebeispiel:

RegExp wird verwendet Überprüfen Sie die Eingabe.
Jedes Mal, wenn Sie ein Zeichen eingeben, wird die gesamte Eingabe mit einem RegExp abgeglichen, um die Gültigkeit zu überprüfen.
Wenn gültig, wird das Zeichen gültig gemacht und zur Eingabe hinzugefügt, andernfalls ist es ungültig.

Zweite Methode:

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

Nach dem Login kopieren

Das laufende Ergebnis ist wie folgt:

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

Im obigen Codebeispiel:

Jedes Mal, wenn ein Zeichen eingegeben wird, wird überprüft, ob das Zeichen gültig ist.
In diesem Beispiel wird auch die Anzahl der eingegebenen Dezimalstellen überprüft. Man kann nicht 2 Dezimalstellen eingeben.
Wenn das Zeichen gültig ist, wird es zur Eingabe hinzugefügt, andernfalls ist es ungültig.

Abschließend möchte ich „JavaScript Basic Tutorial“ jedem empfehlen ~ Willkommen zum Lernen ~

Das obige ist der detaillierte Inhalt vonJavaScript schränkt das Eingabefeld so ein, dass nur Ganzzahlen und Dezimalpunkte zulässig sind (zwei Methoden).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!