JS判定テキストボックス内容変更の簡単な例event_javascriptスキル

oninput、onpropertychange、onchange の使用法

onchange トリガー イベントは 2 つの条件を満たす必要があります:

a) 現在のオブジェクトのプロパティが変更され、キーボードまたはマウス イベントによってトリガーされます (スクリプト トリガーは無効です)

b) 現在のオブジェクトはフォーカスを失います (onblur)。

onpropertychange では、現在のオブジェクトのプロパティが変更される限り、イベントがトリガーされますが、これは IE に限定されます。

oninput は、onpropertychange の非 IE ブラウザ バージョンです。Firefox や Opera などのブラウザをサポートしますが、オブジェクトにバインドされている場合、オブジェクトのすべてのプロパティ変更だけでイベントをトリガーできるわけではありません。オブジェクトの値が変更されると機能します。

バブルイベントを停止

if (e) //イベントバブリングを停止 e.stopPropagation();

else window.event.cancelBubble = true;

上記のコードを実行し、入力ボックスをクリックすると、値を入力するとこのイベントもトリガーされることがわかります。これは、プロパティの値が変更されている限り、このイベントがトリガーされることを示しています。 。

2 番目に、この機能を発見したので、問題が発生します。入力ボックスの値が変更されたときに関数操作を実行したい場合、カスタム属性も変更する必要があるため、onpropertychange が 2 回トリガーされることがあります。 、それは私たちが望んでいることではないかもしれません。

推測ですが、このような属性が提供されているので、どの属性が変更されたのかを取得できるはずです。パラメータの数とその内容を取得してみます。

XML/HTML コード

コードをコピー コードは次のとおりです:

それを実行すると、多くの属性がありますが、注意深く見てみると、propertyname という属性が見つかるかもしれません。この属性の意味は誰でも推測できると思います。はい、これはどの属性が変更されたかを取得するために使用されます。


XML/HTML コード

コードをコピー

コードは次のとおりです:


テキスト ボックスをクリックして値をそれぞれ入力すると、myprop と value がそれぞれポップアップ表示されます。

最初の問題に戻ると、値が変更されたかどうかを判断するだけで済みます。
コードを直接見てみましょう:

XML/HTML コード

コードをコピー

コードは次のとおりです: