Record the information, test it over the past few days, and then release the results.
Copy codeThe Code is as follows:
<Input type = "text" value = "xxx" id = "xx" onclick = "this. myprop = 'xx'">
<Script type = "text/javascript">
<! --
Document. getElementById ('xx'). attachEvent ('onpropertychang', function (o) {alert ('OK ')});
// -->
</Script>
Execute the above Code and click the input box to find that onpropertychange is triggered. Inputting a value will also trigger this event, which proves that, this event is triggered when the value of an attribute is modified.
Second, since we have discovered this feature, there will be a problem: when we sometimes want to execute a function operation when the input box value changes, however, we also need to modify a custom attribute so that onpropertychange will be triggered twice, which may not be what we want.
Assume that, since such an attribute is provided, you must be able to obtain which attribute has been changed. Obtain the number and content of parameters.
Copy codeThe Code is as follows:
<Input type = "text" value = "xxx" id = "xx" onclick = "this. myprop = 'xx'">
<Script type = "text/javascript">
<! --
Document. getElementById ('xx'). attachEvent ('onpropertychang', function (){
Alert (arguments. length );
For (var I = 0; I <arguments. length; I ++ ){
Alert (arguments [I]);
}
});
// -->
</Script>
After executing the above Code, we will find that 1 and [object] are displayed. This indicates that this event only passes one parameter to the callback function and is of the object type.
Then we will try to traverse this object.
Copy codeThe Code is as follows:
<Input type = "text" value = "xxx" id = "xx" onclick = "this. myprop = 'xx'">
<Script type = "text/javascript">
<! --
Document. getElementById ('xx'). attachEvent ('onpropertychang', function (o ){
For (var item in o ){
Alert (item + ":" + o [item]);
}
});
// -->
</Script>
Execute the command and find that there are many attributes, but we may find this attribute: propertyname. I believe everyone can guess the meaning of this attribute. Yes. This is used to obtain the attribute to be modified.
Copy codeThe Code is as follows:
<Input type = "text" value = "xxx" id = "xx" onclick = "this. myprop = 'xx'">
<Script type = "text/javascript">
<! --
Document. getElementById ('xx'). attachEvent ('onpropertychang', function (o ){
Alert (o. propertyName );
});
// -->
</Script>
Click the text box and enter a value. myprop and value are displayed.
Back to the problem we started, we only need to determine whether the value is changed.
Check the Code directly:
Copy codeThe Code is as follows:
<Input type = "text" value = "xxx" id = "xx" onclick = "this. myprop = 'xx'">
<Script type = "text/javascript">
<! --
Document. getElementById ('xx'). attachEvent ('onpropertychang', function (o ){
If (o. propertyName! = 'Value') return; // if the value is not changed, do not perform the following operations.
// ...... Function processing
});
// -->
</Script>
3. Let FF support the effect similar to onPropertyChange
A Real-time verification of the input box has been done before. For example, only numbers are allowed, but letters are allowed. In this case, the user input value is changed to red... you may also encounter a problem when prompted about the remaining printable characters in the textarea text field. It is normal to use onPropertyChange in IE, but it does not work in FF ~~~
So I found a feasible method on the Internet ~~ Firefox has an oninput event with the same effect as onPropertyChange, so the problem of oninput and onPropertyChange is solved ~~~ Oo ....
<Input type = "text" oninput = "cgColor (this);" onPropertyChange = "cgColor (this ); "maxlength =" 4 "name =" pt_bankou "id =" pt_bankou "value =" "/>