Numerische jQuery-Eingabefunktion, die die Eingabe auf Zahlen und Dezimalstellen beschränkt-js-Tutorial-php.cn

Numerische jQuery-Eingabefunktion, die die Eingabe auf Zahlen und Dezimalstellen beschränkt

WBOY

Freigeben： 2024-02-25 14:21:22

Original

761 Leute haben es durchsucht

Numerische jQuery-Eingabefunktion, die die Eingabe auf Zahlen und Dezimalstellen beschränkt

Titel: Verwenden Sie jQuery, um die numerische Eingabe auf Zahlen und Dezimalstellen zu beschränken.

Bei der Webentwicklung stoßen wir häufig auf Situationen, in denen wir Benutzer darauf beschränken müssen, nur Zahlen und Dezimalstellen in das Eingabefeld einzugeben. Um diese Funktion zu erreichen, können Sie jQuery verwenden, um die numerische Grenze des Eingabefelds zu realisieren. Im Folgenden wird erläutert, wie Sie mit jQuery das Eingabefeld nur auf Zahlen und Dezimalstellen beschränken, und es werden spezifische Codebeispiele bereitgestellt.

Zuerst müssen wir die jQuery-Bibliothek einführen, um sicherzustellen, dass jQuery korrekt in die Webseite eingeführt wird. Als Nächstes können wir den folgenden jQuery-Code schreiben, um numerische Eingabebeschränkungen zu implementieren:

<!DOCTYPE html>
<html>
<head>
    <title>数值输入限制为数字和小数点</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('.numeric-input').on('input', function () {
                // 将输入框的值设为数字和小数点之外的字符替换为空
                $(this).val($(this).val().replace(/[^0-9.]/g, ''));
                
                // 确保只能输入一个小数点
                if ($(this).val().indexOf('.') !== $(this).val().lastIndexOf('.')) {
                    $(this).val($(this).val().slice(0, -1));
                }
            });
        });
    </script>
</head>
<body>
    <input type="text" class="numeric-input" placeholder="只能输入数字和小数点">
</body>
</html>

Nach dem Login kopieren

In diesem Code verwenden wir zunächst die Methode $(document).ready() von jQuery, um sicherzustellen, dass das DOM ausgeführt wurde Der Code ist nach dem Laden abgeschlossen. Als nächstes binden wir einen Listener für das input-Ereignis an das Eingabefeld mit der Klasse numeric-input. Wenn sich der Inhalt im Eingabefeld ändert, wird der Listener ausgelöst. Ereignis. $(document).ready()方法来确保DOM已经加载完毕后再执行代码。接着，我们对带有numeric-input类的输入框绑定了一个input事件的监听器，当输入框中的内容发生改变时，会触发该事件。

在事件处理函数中，我们使用正则表达式/[^0-9.]/g

In der Event-Handler-Funktion verwenden wir den regulären Ausdruck /[^0-9.]/g, um alle Zeichen, die keine Zahlen und Dezimalpunkte sind, abzugleichen und sie durch leere Zeichen zu ersetzen. Dadurch wird die Funktion implementiert, die Eingabe nur von Zahlen und Dezimalstellen zu beschränken. Gleichzeitig haben wir auch eine Logik hinzugefügt, um sicherzustellen, dass nur ein Dezimalpunkt eingegeben werden kann, um zu verhindern, dass der Benutzer mehrere Dezimalpunkte eingibt.

Durch die obigen Codebeispiele können wir jQuery verwenden, um die Funktion zur Beschränkung der numerischen Eingabe im Eingabefeld auf Zahlen und Dezimalstellen einfach zu implementieren und so die Genauigkeit und Erfahrung der Benutzereingaben zu verbessern. 🎜

Das obige ist der detaillierte Inhalt vonNumerische jQuery-Eingabefunktion, die die Eingabe auf Zahlen und Dezimalstellen beschränkt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!