Heim > Artikel > Web-Frontend > JavaScript schränkt das Eingabefeld so ein, dass nur Ganzzahlen und Dezimalpunkte zulässig sind (zwei Methoden).

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

藏色散人Original: 2021-08-26 14:22:504175Durchsuche

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>

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Bringen Sie Ihnen Schritt für Schritt bei, wie Sie gängige Module mit JS schreiben (detaillierte Code-Erklärung)Nächster Artikel：Bringen Sie Ihnen Schritt für Schritt bei, wie Sie gängige Module mit JS schreiben (detaillierte Code-Erklärung)

In Verbindung stehende Artikel

Mehr sehen