jQuery を使用して、数字と小数点のみを入力できる入力ボックスを実装します。

jQuery 入力ボックスを実装して数値と小数点の入力を制限する

Web 開発では、ユーザーが入力したコンテンツを制御する必要があることがよくあります。入力ボックス (入力を数値と小数点のみに制限するなど)。この制限は、JavaScript と jQuery を通じて実現できます。 jQueryを使って入力ボックスへの数字や小数点の入力を制限する機能を実装する方法を紹介します。

1. HTML 構造

まず、HTML で入力ボックスを作成する必要があります。コードは次のとおりです:

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

ここでは、ID を使用して入力ボックスを作成します。 "inputNumber" を入力し、プレースホルダー属性を "数値と小数点のみを入力できる" に設定して、数値と小数点のみを入力できることをユーザーに要求します。

2. jQuery で入力制限機能を実装します

次に、jQuery を使用して入力制限機能を実装します。コードは次のとおりです。

$(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();
      }
    }
  });
});

上記のコードでは、まず $(document).ready() 関数を使用して、jQuery コードを実行する前に DOM がロードされていることを確認します。次に、keypress() 関数を使用して、入力ボックスのキーボード押下イベントを監視します。イベント処理関数では、event.that または event.keyCode を使用してキーの ASCII コードを取得し、入力が数値か小数点かを判断します。 、デフォルトのイベントをブロックします。

小数点の状況に対処するには、入力ボックスにすでに小数点がある場合、小数点を再度入力できないようにするか、小数点入力が入力ボックスの先頭にあることに注意してください。入力ボックス。

3. テスト

最後に、コードをテストしましょう。上記のコードを含む HTML ページをブラウザで開き、入力ボックスに他の文字を入力して、数字と小数点のみが入力できることを確認します。

この操作により、jQuery を使用して入力ボックスを数字と小数点のみに制限できます。これにより、ユーザーが仕様を入力するのに効果的に役立ち、ユーザー エクスペリエンスが向上します。上記の内容が、対応する機能の実装に役立つことを願っています。

以上がjQuery を使用して、数字と小数点のみを入力できる入力ボックスを実装します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。