入力を数字と小数点に限定するjQuery数値入力機能-jsチュートリアル-php.cn

入力を数字と小数点に限定するjQuery数値入力機能

WBOY

リリース： 2024-02-25 14:21:22

オリジナル

735 人が閲覧しました

入力を数字と小数点に限定するjQuery数値入力機能

タイトル: jQuery を使用して数値入力を数字と小数点に制限する

Web 開発では、ユーザーが入力に数字のみを入力できるように制限する必要があることがよくあります。ボックスと小数点。この機能を実現するには、jQuery を使用して入力ボックスの数値制限を実現します。ここでは、jQuery を使用して入力ボックスを数字と小数点のみに制限する方法と、具体的なコード例を紹介します。

まず、jQuery ライブラリを導入して、jQuery が Web ページに正しく導入されるようにする必要があります。次に、次の jQuery コードを記述して数値入力制限を実装します。

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

ログイン後にコピー

このコードでは、最初に jQuery の $(document).ready() メソッドを使用して DOM を確認します。コードを実行する前にロードされています。次に、numeric-input クラスを使用して、input イベントのリスナーを入力ボックスにバインドしました。入力ボックスの内容が変更されると、イベントがトリガーされます。

イベントハンドラー関数では、正規表現 /[^0-9.]/g を使用して、数字と小数点以外のすべての文字を照合し、null に置き換えます。数値と小数点のみの入力を制限する機能を実装します。同時に、ユーザーが複数の小数点を入力できないように、小数点を 1 つだけ入力できるようにするロジックも追加しました。

上記のコード例を通じて、jQuery を使用して、入力ボックスへの数値入力を数字と小数点に制限する機能を簡単に実装でき、ユーザー入力の精度とエクスペリエンスが向上します。

以上が入力を数字と小数点に限定するjQuery数値入力機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。