JS to infer text box content change events

Source: Internet
Author: User

How to use oninput,onpropertychange,onchange

the onchange trigger event must meet two conditions:

a The current object property is changed and is fired by a keyboard or mouse event (script trigger is not valid)

b ) The current object loses focus (onblur);  

Onpropertychange words , only the current object property changes, will trigger the event, but it is exclusive to IE ;       

oninput is Onpropertychange 's non- IE Browser version number that supports browsers such as Firefox and Opera , but with a bit different, when it is bound to an object, Not all property changes in the object can trigger events, it only works if the object value changes.

Stop bubbling Events

if (e)//Stop event bubbling e.stoppropagation ();

else window.event.cancelBubble = true;

Running the above code, clicking on the input box will also trigger Onpropertychange, and entering a value of the same will trigger the event, which proves that the event is triggered only if the value of the property is altered.

Second, since we have discovered this feature, there is a problem: when we sometimes want to run a function operation when the input box value changes, but at the same time we have to change a property of our own definition, so that Onpropertychange will be triggered two times, this may not be what we want.
Suppose that, given such a property, it must be possible to get to which property has been changed. Try to get the number of parameters and the content of the parameters.

Xml/html code
<input type= "text" value= "xxx" id= "xx" onclick= "this.myprop= ' xx '" >  
< Script type= "Text/javascript" >  
<!--   
   document.getElementById (' xx '). attachevent (' Onpropertychange ', function () {   
         alert (arguments.length);   
        for (var i=0;i<arguments.length;i++) {   
            alert (arguments[i]);   
     }   
   });    
-->  
</script>  
      Running the preceding section of code, you will find a popup 1 and [Object], which indicates that the event only passes a parameter to the callback function and is an object type.
      then we'll try to iterate over this object.

Xml/html code
<input type= "text" value= "xxx" id= "xx" onclick= "this.myprop= ' xx '" >  
  <script type= "Text/javascript" >  
  <!--   
   document.getElementById (' xx '). attachevent (' Onpropertychange ', function (o) {   
        for (var item in O) {   
            alert (item+ ":" +o[item]);   
      }    
  });   
 //-->  
</script>  
     run it and find that there are very many properties, but looking at it in detail we may find a property: PropertyName, I believe everyone can guess the meaning of this attribute. Yes, this is used to get which property has been changed.

Xml/html code
<input type= "text" value= "xxx" id= "xx" onclick= "this.myprop= ' xx '" >  
< Script type= "Text/javascript" >  
<!--   
  document.getElementById (' xx '). attachevent (' Onpropertychange ', function (o) {   
      alert ( O.propertyname);   
 });   
//-->  
</script>   
   Click the text box individually and enter a value, and you'll see that MyProp and value are ejected separately.
  
   back to the beginning of our question, we just need to infer if value is changed.
   Look at the code directly:

xml/html Code
<input type= "text" value= "xxx" id= "xx" onclick= "this.myprop= ' xx '" >
<script type= "Text/javascript" >
<!--
document.getElementById (' xx '). attachevent (' Onpropertychange ', function (o) {
if (o.propertyname!= ' value ') return; Not value change does not run the following operation
//....... function processing
});
-
</script>

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.