情報を記録し、数日以内にテストして結果を公開します コードをコピーします コードは次のとおりです: <br> <!-- <BR>document.getElementById('xx').attachEvent('onpropertychange',function(o){alert('ok')}); <BR>//- -> <br>< ;/script> <br> </div> <br>上記のコードを実行し、入力ボックスをクリックすると、onpropertychange もトリガーされることがわかります。プロパティの値が変更されている限り、このイベントがトリガーされます。 <br><br>2 番目に、この機能を発見したので、問題が発生します。入力ボックスの値が変更されたときに関数操作を実行したい場合、カスタム属性も変更する必要がある場合があります。したがって、onpropertychange は 2 回トリガーされますが、これは私たちが望むものではない可能性があります。 <br>推測ですが、このような属性が提供されているので、どの属性が変更されたのかを取得できるはずです。パラメータの数とその内容を取得してみます。 <br><br><div class="codetitle"> <span><a style="CURSOR: pointer" data="15625" class="copybut" id="copybut15625" onclick="doCopy('code15625')"><u>コードをコピー</u></a></span> コードは次のとおりです:</div> <div class="codebody" id="code15625"> <br><input type=" text" value ="xxx" id="xx" onclick="this.myprop='xx'"> <br><script type="text/javascript"> <br><!-- <br>document.getElementById('xx').attachEvent('onpropertychange',function(){ <br>alert(arguments.length); <br>for(var i=0;i<arguments.length>alert (arguments[i]); <br>} <br>}); <br><br> <br> 上記のコードを実行しますすると、「1」と「[object]」というポップアップが表示されます。これは、イベントがコールバック関数にパラメータを 1 つだけ渡し、それがオブジェクト型であることを示しています。 </arguments.length> </div>それでは、このオブジェクトを走査してみましょう。 <br><br><br><br><div class="codetitle"> <span>コードをコピー<a style="CURSOR: pointer" data="93599" class="copybut" id="copybut93599" onclick="doCopy('code93599')"><u></u> コードは次のとおりです:</a></span> </div><input type=" text" value ="xxx" id="xx" onclick="this.myprop='xx'"> <div class="codebody" id="code93599"><script type="text/javascript"> <br><!-- <BR>document.getElementById('xx').attachEvent('onpropertychange',function(o){ <BR>for(var item in o){ <BR>alert(item ":" o[item]); <BR> } <BR>}); <BR>//-> <BR></script> <br><br> <br>よく見ると、 propertyname というような属性が見つかるかもしれません。このプロパティの意味は誰もが推測できると思います。はい、これはどの属性が変更されたかを取得するために使用されます。 </div> <br><br><br><div class="codetitle"> <span>コードをコピー<a style="CURSOR: pointer" data="33120" class="copybut" id="copybut33120" onclick="doCopy('code33120')"><u></u> コードは次のとおりです:</a></span> </div><input type=" text" value ="xxx" id="xx" onclick="this.myprop='xx'"> <div class="codebody" id="code33120"><script type="text/javascript"> <br><!-- <br>document.getElementById('xx').attachEvent('onpropertychange',function(o){ <br>alert(o.propertyName); <br>}); ;/script> ; <br><br> <br>テキスト ボックスをクリックして値をそれぞれ入力すると、myprop と value がそれぞれポップアップ表示されることがわかります。 <br><br>最初の問題に戻ると、値が変更されたかどうかを判断するだけで済みます。 </div>コードを直接確認します: <br><br><br><br><br><br>コードをコピーします<div class="codetitle"> <span><a style="CURSOR: pointer" data="14557" class="copybut" id="copybut14557" onclick="doCopy('code14557')"> コードは次のとおりです: <u></u> </a><input type="text" value="xxx" id="xx" onclick="this.myprop='xx'"> </span><script type="text/javascript"> </div>< !-- <div class="codebody" id="code14557">document.getElementById('xx').attachEvent('onpropertychange',function(o){ <BR>if(o.propertyName!='value')return; //If値が変更されない場合、次の処理は実行されません。<BR>//--> ><br><br>3. FF に onPropertyChange と同様の効果をサポートさせる <br><br> たとえば、入力ボックスは数字のみを入力できますが、ユーザーは文字などを入力します。このとき、ユーザーは「値が赤になる」などと入力します。または、テキストエリアのテキストフィールドに残りの入力文字を求めるプロンプトが表示されます。IE では onPropertyChange を使用しても問題ありませんが、効果はありません。 on FF~~~ <br><br>そこで、インターネット上で実行可能な方法を見つけました~~ Firefox には onPropertyChange と同じ効果を持つ oninput イベントがあるため、oninput と onPropertyChange を同時に追加すると問題は解決します~~ ~ oo.... <br><br><input type="text" oninput="cgColor(this);" onPropertyChange="cgColor(this);" maxlength="4" name="pt_bankou" id= "pt_banko" value="" />
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
