ホームページ >ウェブフロントエンド >jsチュートリアル >JQueryを使用して入力テキストフィールドの変更をリアルタイムで検出するにはどうすればよいですか?

JQueryを使用して入力テキストフィールドの変更をリアルタイムで検出するにはどうすればよいですか?

Barbara Streisand
Barbara Streisandオリジナル
2024-10-29 20:03:29386ブラウズ

How to Detect Changes to Input Text Fields in Real-Time with JQuery?

JQuery を使用して入力テキスト フィールドの変更を即座に検出する

入力テキスト フィールドを操作する場合、値の変更を即座に追跡することが重要です。これは、キー押下、コピー/ペースト操作、JavaScript の変更、ブラウザまたはツールバーのオートコンプリート、フォームのリセットなどのアクションに対応します。 JQuery を利用すると、柔軟性とブラウザ間の互換性が得られます。

この目標を達成するために、JQuery は .bind() を使用した堅牢なアプローチを提供します。次のコード スニペットを考えてみましょう。

$('.myElements').each(function() {
  var elem = $(this);

  // Store the initial value
  elem.data('oldVal', elem.val());

  // Monitor for value changes
  elem.bind("propertychange change click keyup input paste", function(event) {
    // If the value has changed...
    if (elem.data('oldVal') != elem.val()) {
      // Update the stored value
      elem.data('oldVal', elem.val());

      // Execute desired action
      // ...
    }
  });
});

.bind() は jQuery バージョン 3.0 で非推奨になっていることに注意してください。バージョン 1.7 以降の場合は、.on() に切り替えます。

このソリューションを使用すると、入力テキスト フィールドに対するすべての変更を効率的に検出し、それに応じて対応できます。

以上がJQueryを使用して入力テキストフィールドの変更をリアルタイムで検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。