Check whether the input is valid and there is a problem with the Chinese character input.

Source: Internet
Author: User
Tags printable characters

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 =" "/>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.