JS判定テキストボックスの内容変更イベントの簡単な例


oninput、onpropertychange、onchangeの使い方
onchangeトリガイベントは二つの条件を満たす必要があります。
a)現在のオブジェクトの属性が変更され、キーボードまたはマウスのイベントによって励起されました(スクリプトトリガが無効です)。
b)現在のオブジェクトはフォーカスを失う。
onpropertychangeの場合、現在のオブジェクトの属性が変わると、イベントが発生しますが、それはIEだけのものです。      
oninputは、one propertychangeの非IEブラウザバージョンであり、firefoxやoperaなどのブラウザをサポートしていますが、オブジェクトに結び付けられている場合は、オブジェクトのすべての属性変更がイベントをトリガするわけではありません。オブジェクトvalue値が変更された時だけ有効です。
泡事件を止める
if(e)//停止イベント発泡e.stopPropagation()else  window.event.cnce Bubble=true;
上のコードを実行して、入力ボックスをクリックしてもonpropertychangeが起動されます。値を入力してもこのイベントがトリガされます。これは、属性の値が変更されるとイベントがトリガされることを証明します。
第二に、この特徴を見つけたら、問題があります。入力ボックスの値が変わった時に、関数操作を実行したいですが、同時にカスタム属性を変更したいです。このようにonpropertychangeは二回トリガされます。これは私達が望むものではないかもしれません。このような属性を提供した以上、どの属性が変更されたのかを推測してください。パラメータの個数とパラメータの内容を取得してみます。
XML/HTMLコード

<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'"> 
<script type="text/javascript"> 
<!--  
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(){  
alert(arguments.length);  
for(var i=0;i<arguments.length;i++){  
alert(arguments[i]);  
}  
});  
--> 
</script> 
は、上記のコードを実行すると、1および[object]がポップアップされていることが分かります。このことは、このイベントがコールバック関数にパラメータが一つだけ入ってきて、しかもobjectタイプであることを示しています。このobjectを試してみます。
XML/HTMLコード

<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'"> 
<script type="text/javascript"> 
<!--  
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){  
for(var item in o){  
alert(item+":"+o[item]);  
}  
});  
//--> 
</script> 
を実行してみると、いくつかの属性がありますが、よく見ると、このような属性が発見されるかもしれません。はい、これはどの属性が変更されたかを取得するためのものです。
XML/HTMLコード

<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'"> 
<script type="text/javascript"> 
<!--  
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){  
alert(o.propertyName);  
});  
//--> 
</script> 
はそれぞれテキストボックスをクリックし、値を入力すると、それぞれmypropとvalueがポップアップされていることが分かります。
また私たちが始めた問題に戻ります。私たちはvalueが変更されたかどうかを判断するだけでいいです。コードを直接見ましょう。
XML/HTMLコード

<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'"> 
<script type="text/javascript"> 
<!--  
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){  
if(o.propertyName!='value')return;  // value   
//.......   
});  
//--> 
</script>