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

jQuery を使用してテキスト入力フィールドへのすべての変更を検出するにはどうすればよいですか?

Patricia Arquette
リリース: 2024-11-02 11:15:30
オリジナル
748 人が閲覧しました

How to Detect Every Change to a Text Input Field with jQuery?

jQuery を使用したテキスト入力へのすべての変更のキャプチャ

方法 (キー押下、コピー/など) に関係なく、入力テキスト フィールドの値への変更を検出します。貼り付け、JavaScript 編集、オートコンプリート)。 jQuery を使用して変更がすぐに登録されていることを確認します。

ソリューション

jQuery の .bind() を使用して、この堅牢でブラウザ互換のソリューションを実装します。

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

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

   // Monitor value alterations
   elem.bind("propertychange change click keyup input paste", function(event) {
      if (elem.data('oldVal') != elem.val()) {
         elem.data('oldVal', elem.val());

         // Custom action upon change
         ...
      }
   });
});
ログイン後にコピー

注: '.myElements' を入力フィールドのセレクターに置き換えます。

jQuery バージョン 3.0 以降の場合は、.bind() の代わりに .on() を使用します:

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

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

   // Monitor value alterations
   elem.on("propertychange change click keyup input paste", function(event) {
      if (elem.data('oldVal') != elem.val()) {
         elem.data('oldVal', elem.val());

         // Custom action upon change
         ...
      }
   });
});
ログイン後にコピー

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート