JavaScript verbietet die Eingabe

JavaScript Keine Eingabe

Durch die kontinuierliche Entwicklung des Internets ist JavaScript zu einem unverzichtbaren Bestandteil des modernen Webdesigns geworden. JavaScript kann die Interaktivität von Webseiten verbessern und Benutzern die Eingabe und Bedienung von Daten erleichtern. In einigen Fällen müssen wir jedoch einige Funktionen implementieren, die die Benutzereingabe über JavaScript einschränken. Verbieten Sie Benutzern beispielsweise die Eingabe bestimmter Zeichen oder begrenzen Sie die Anzahl der Zeichen, die Benutzer eingeben können usw. Dieser Artikel hilft Ihnen bei der Implementierung dieser Funktionen, indem er einige JavaScript-Techniken erklärt.

Eingabe bestimmter Zeichen verbieten

Wenn Sie die Eingabe bestimmter Zeichen im Benutzereingabefeld verbieten möchten, können Sie dazu reguläre JavaScript-Ausdrücke verwenden. Wenn Sie beispielsweise möchten, dass der Benutzer nur Zahlen eingibt, können Sie im onkeypress-Ereignis des Benutzereingabefelds den folgenden Code verwenden:

function checkNumber(event) {
  var charCode = event.keyCode;
  if (charCode < 48 || charCode > 57) {
    event.preventDefault();
  }
}

In diesem Code erhalten wir zunächst das ASCII der Zeichen Geben Sie den vom Benutzer eingegebenen Code ein und bestimmen Sie dann, ob es sich bei dem Zeichen um eine Zahl handelt. Wenn es sich nicht um eine Zahl handelt, wird die Methode event.preventDefault() aufgerufen, um das Standardzeicheneingabeereignis zu verhindern.

Wenn Sie Benutzer daran hindern möchten, andere bestimmte Zeichen einzugeben, ändern Sie einfach die Beurteilungsbedingungen. Wenn Sie beispielsweise verhindern möchten, dass Benutzer Buchstaben und Satzzeichen eingeben, können Sie den folgenden Code verwenden:

function checkCharacter(event) {
  var charCode = event.keyCode;
  if ((charCode >= 65 && charCode <= 90) || (charCode >= 97 && charCode <= 122) || (charCode >= 33 && charCode <= 47) || (charCode >= 58 && charCode <= 64) || (charCode >= 91 && charCode <= 96) || (charCode >= 123 && charCode <= 126)) {
    event.preventDefault();
  }
}

In diesem Code ändern wir die Beurteilungsbedingung, um zu beurteilen, ob es sich bei den Zeichen um Buchstaben oder Satzzeichen handelt Markierungen.

Keine Leerzeichen erlaubt

Manchmal hoffen wir, dass Benutzer bei der Eingabe von Daten keine Leerzeichen eingeben können. Dies kann dadurch erreicht werden, dass erkannt wird, ob es sich bei den vom Benutzer eingegebenen Zeichen um Leerzeichen handelt. Sie können beispielsweise den folgenden Code im onkeypress-Ereignis des Benutzereingabefelds verwenden:

function checkWhiteSpace(event) {
  var charCode = event.keyCode;
  if (charCode === 32) {
    event.preventDefault();
  }
}

In diesem Code ermitteln wir, ob es sich bei den vom Benutzer eingegebenen Zeichen um Leerzeichen handelt, und rufen in diesem Fall das Ereignis auf .preventDefault() Methode zum Verhindern des Standardzeicheneingabeereignisses.

Eingaben verbieten, die die angegebene Anzahl von Zeichen überschreiten.

Wenn Sie die Anzahl der Zeichen begrenzen möchten, die der Benutzer in das Eingabefeld eingibt, können Sie dies tun, indem Sie die Anzahl der Zeichen ermitteln Zeichen im Benutzereingabefeld. Sie können beispielsweise den folgenden Code im oninput-Ereignis des Benutzereingabefelds verwenden:

function limitInput(event, maxLength) {
  var input = event.target.value;
  if (input.length > maxLength) {
    event.target.value = input.slice(0, maxLength);
  }
}

In diesem Code erhalten wir zunächst den Wert im Benutzereingabefeld und ermitteln, ob die Anzahl der Zeichen überschritten wird die angegebene maximale Anzahl von Zeichen (maxLength). Wenn der Wert überschritten wird, werden die ersten maxLength-Zeichen abgefangen und in das Eingabefeld zurückgeschrieben.

Vollständiges Beispiel

Das Folgende ist ein vollständiges Beispiel, das zeigt, wie JavaScript verwendet wird, um Funktionen wie das Verbieten der Eingabe bestimmter Zeichen, das Verbieten der Eingabe von Leerzeichen usw. zu implementieren Verbieten der Eingabe von mehr als einer angegebenen Anzahl von Zeichen:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript 禁止输入</title>
</head>
<body>
  <form>
    <label>只能输入数字：</label>
    <input type="text" onkeypress="checkNumber(event)">
    <br><br>
    <label>不能输入空格：</label>
    <input type="text" onkeypress="checkWhiteSpace(event)">
    <br><br>
    <label>最多只能输入 5 个字符：</label>
    <input type="text" oninput="limitInput(event, 5)">
  </form>

  <script>
    function checkNumber(event) {
      var charCode = event.keyCode;
      if (charCode < 48 || charCode > 57) {
        event.preventDefault();
      }
    }

    function checkWhiteSpace(event) {
      var charCode = event.keyCode;
      if (charCode === 32) {
        event.preventDefault();
      }
    }

    function limitInput(event, maxLength) {
      var input = event.target.value;
      if (input.length > maxLength) {
        event.target.value = input.slice(0, maxLength);
      }
    }
  </script>
</body>
</html>

In diesem Beispiel erstellen wir ein Formular mit drei Eingabefeldern, die verwendet werden, um die Funktionen des Verbietens der Eingabe von Zahlen zu demonstrieren die Eingabe von Leerzeichen und das Verbot der Eingabe von mehr als einer bestimmten Anzahl von Zeichen. Jedes Eingabefeld ist an einen entsprechenden JavaScript-Ereignishandler gebunden.

Fazit

Durch die Verwendung von JavaScript können wir problemlos verschiedene Funktionen implementieren, die die Benutzereingabe einschränken. Dies verbessert nicht nur die Sicherheit und Datenqualität der Website, sondern bietet den Benutzern auch ein besseres interaktives Erlebnis. Wir hoffen, dass dieser Artikel Ihnen dabei hilft, JavaScript besser zur Umsetzung Ihres Webdesigns zu nutzen.

Das obige ist der detaillierte Inhalt vonJavaScript verbietet die Eingabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!