jqueryでテキストの変更を監視する方法

jQuery は、Web サイトの開発方法に革命を起こすために広く使用されている JavaScript ライブラリです。このライブラリには、HTML ドキュメント内のコンテンツに簡単にアクセスして変更するのに役立つさまざまな関数とメソッドが含まれています。

この記事では、jQuery がテキストの変更をリッスンする方法について説明します。テキスト ボックスにデータを入力する必要がある場合、テキスト ボックスに文字を入力したらすぐに入力することができます。 jQuery を使用してテキストの変更をリッスンする方法を理解すると、Web サイトの動的要素と対話性をより適切に制御できるようになるだけでなく、jQuery の基本を理解するのにも役立ちます。

jQuery の場合、テキストの変更を監視するには .value() メソッドと .bind() メソッドを使用する 2 つの方法があります。テキストの変更をリッスンするために両方のメソッドを使用する方法をよりよく理解できるように、両方のメソッドについて詳しく説明します。

.value() メソッドを使用してテキストの変更を監視する

.value() メソッドは、フォーム HTML 要素の値を取得するために使用されます。ユーザー入力に対する最新の変更を含む、テキスト ボックスの現在の値をキャプチャします。テキストの変更をリッスンするには、入力中にそれを使用する必要があります。

以下はサンプル コードです:

$(document).ready(function(){
  $("#myTextBox").on('input propertychange', function(){
    console.log("Text changed!");
  });
});

上記のコード ブロックは、input と propertychange の 2 つのイベント ハンドラーをバインドする jQuery の .on() メソッドを使用します。これら 2 つのイベント ハンドラーは、テキスト ボックス内のあらゆる変更をトリガーできます。どちらもハンドラー関数を呼び出し、この場合はテキストが変更されたというメッセージを出力します。

なぜ 1 つだけを使用するのではなく 2 つのイベント ハンドラーをバインドする必要があるのか​​疑問に思われるかもしれません。これは、これら 2 つのイベントがクロスブラウザーであるためです。 propertychange イベントは IE でのみ機能しますが、input イベントは他のすべてのブラウザで機能します。したがって、これら 2 つのイベントを組み合わせて使用​​すると、コードはすべての主要なブラウザーで正しく実行されます。

ユーザーがテキストを入力すると、イベント ハンドラー関数がコンソールにメッセージ「テキストが変更されました!」を出力します。これは、テキスト ボックスに文字を入力すると、このリスニング イベントがトリガーされることを意味します。 。

.bind() メソッドを使用してテキストの変更を監視する

次に、jQuery の .bind() メソッドを使用してテキストの変更を監視する方法を見てみましょう。 .bind() メソッドは、イベント ハンドラーをバインドするメソッドであり、テキスト ボックスの値の変更を監視するために使用できます。

以下はサンプル コードです:

$(document).ready(function() {
  $('#myTextBox').bind('input', function() {
    console.log("Text changed!")
  });
});

この例では、.bind() メソッドを使用します。これは、前の例の .on() メソッドとは少し異なりますが、基本的な機能は同じです。テキスト ボックスに新しい値が入力されるたびに呼び出されるイベント ハンドラー関数を指定しました。

前の方法と同様に、プログラムの実行中にテキスト ボックスへの入力を監視します。ユーザーがテキスト ボックスに値を入力すると、イベント ハンドラー関数によって「テキストが変更されました!」というメッセージがコンソールに出力されます。さらに、前の方法と同様に、この方法も異なるブラウザー間での動作をサポートします。

概要

この記事では、jQuery を使用してテキスト ボックス内のテキストの変更を監視する方法を学習しました。 .value() メソッドと .bind() メソッドを使用する 2 つの異なるアプローチについて説明しました。

.value() 関数メソッドを使用してテキスト ボックスの現在の値を取得し、input と propertychange の 2 つのイベント ハンドラーを使用して、ブラウザー間の動作をサポートします。 .bind() メソッドを使用する方法は同じですが、イベント ハンドラーを指定して実装するだけです。個人の好みに基づいて、これらの方法のいずれかを選択できます。

どの方法を選択しても、サイトの動的要素と対話性をより詳細に制御できるようになります。さらに、これらのメソッドを使用すると、jQuery の基本をより深く理解できるようになります。

以上がjqueryでテキストの変更を監視する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。