Verwenden Sie jQuery, um ein Eingabefeld zu implementieren, das nur die Eingabe von Zahlen und Dezimalstellen zulässt

Implementieren Sie das jQuery-Eingabefeld, um die Eingabe von Zahlen und Dezimalstellen einzuschränken.

Bei der Webentwicklung müssen wir häufig die von Benutzern in das Eingabefeld eingegebenen Inhalte steuern, z. B. die Eingabe von Zahlen und Dezimalstellen begrenzen . Diese Einschränkung kann durch JavaScript und jQuery erreicht werden. Im Folgenden wird erläutert, wie Sie mit jQuery die Funktion zur Begrenzung der Eingabe von Zahlen und Dezimalstellen in das Eingabefeld implementieren.

1. HTML-Struktur

Zuerst müssen wir ein Eingabefeld in HTML erstellen, der Code lautet wie folgt:

<input type="text" id="inputNumber" placeholder="只能输入数字和小数点">

Hier erstellen wir ein Eingabefeld mit der ID „inputNumber“ und setzen das Platzhalterattribut auf „Nur Zahlen“. und Dezimalpunkt eingegeben werden, um den Benutzer aufzufordern, nur Zahlen und Dezimalpunkte einzugeben.

2. jQuery implementiert die Eingabebeschränkungsfunktion

Als nächstes verwenden wir jQuery, um die Eingabebeschränkungsfunktion zu implementieren. Der Code lautet wie folgt:

$(document).ready(function(){
  $('#inputNumber').keypress(function(event) {
    var charCode = (event.which) ? event.which : event.keyCode;
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
      event.preventDefault();
    } else {
      var input = $(this).val();
      if ((charCode == 46 && input.indexOf('.') !== -1) || (charCode == 46 && input === "")) {
        event.preventDefault();
      }
    }
  });
});

Verwenden Sie im obigen Code zuerst $(document).ready()函数来确保DOM加载完毕后再执行jQuery代码。然后通过keypress()函数来监听输入框的键盘按下事件。在事件处理函数中，通过event.which或event.keyCode, um den ASCII-Code des Schlüssels abzurufen, und bestimmen Sie dann, ob es sich bei der Eingabe um eine Zahl oder einen Dezimalpunkt handelt. Wenn nicht, verhindern Sie das Standardereignis.

Es ist zu beachten, dass zur Bewältigung der Dezimalpunktsituation, wenn das Eingabefeld bereits einen Dezimalpunkt hat, die erneute Eingabe des Dezimalpunkts oder die Eingabe des Dezimalpunkts am Anfang des Eingabefelds verhindert werden muss.

3. Testen

Abschließend testen wir den Code. Öffnen Sie die HTML-Seite mit dem obigen Code im Browser und versuchen Sie, andere Zeichen in das Eingabefeld einzugeben, um sicherzustellen, dass nur Zahlen und Dezimalpunkte eingegeben werden können.

Durch diesen Vorgang können wir jQuery verwenden, um das Eingabefeld nur auf Zahlen und Dezimalstellen zu beschränken. Dies kann Benutzern bei der Eingabe von Spezifikationen effektiv helfen und die Benutzererfahrung verbessern. Ich hoffe, dass der obige Inhalt Ihnen bei der Implementierung der entsprechenden Funktionen helfen kann.

Das obige ist der detaillierte Inhalt vonVerwenden Sie jQuery, um ein Eingabefeld zu implementieren, das nur die Eingabe von Zahlen und Dezimalstellen zulässt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!