JS Monitoring input Box value of the immediate change Onpropertychange, oninput in many cases we will listen to the changes in the input box value, in order to make instant action to guide the browser to enhance the user experience of the site.
the effect to be achieved
In many cases, we listen to changes in the input box values, so that we can make instant actions to guide the visitors to enhance the user experience of the site. such as the instant display of the input box has been entered into the number of bytes, or immediately read the input values to search for guidance, that is, Google's associated search effect.
As long as we can capture instant events, we can do a lot of things.
knowledge you need to know
First, we need to understand the differences between onchange and Onpropertychange:
Under IE, when a property of an HTML element changes, it can be captured instantly via Onpropertychange.
OnChange must also cause the current element to lose focus (onblur) when the property value changes to activate the event.
To understand this, we find that the effect of Onpropertychange is what we want, but unfortunately, it only works under IE. Can we find another time to replace Onpropertychange?
Through the data learned that in other browsers can use the Oninput event to achieve the same effect, it is very good, we just need to distinguish the IE browser can be.
Use of Oninput
Let's look at how oninput is used.
If you are writing the registration time directly in the page, then the following can be implemented:
<input type= "text" name= "TextField" oninput= "alert (this.value);" onpropertychange= "alert (this.value)"/>
However, the oninput written in the JS code is separated from the normal event registration method is somewhat different, you must use the AddEventListener to register.
the difference between attachevent and AddEventListener
Speaking of which, let's take a look at how attachevent and AddEventListener are used:
The Attachevent method, which attaches additional processing events to an event. (Mozilla series not supported)
AddEventListener Method for Mozilla series
Example:
document.getElementById ("btn"). onclick = method1;
document.getElementById ("btn"). onclick = Method2;
document.getElementById ("btn"). onclick = method3;
If this is written, then only MEDHOT3 will be executed.
written like this:
var btn1obj = document.getElementById ("btn1");
Btn1obj.attachevent ("onclick", method1);
Btn1obj.attachevent ("onclick", method2);
Btn1obj.attachevent ("onclick", method3);
Execution order is METHOD3->METHOD2->METHOD1
In the case of the Mozilla series, this method is not supported and needs to be AddEventListener
var btn1obj = document.getElementById ("btn1");
Btn1obj.addeventlistener ("click", Method1,false);
Btn1obj.addeventlistener ("click", Method2,false);
Btn1obj.addeventlistener ("click", Method3,false);
Execution order is method1->method2->method3
After we learned how to use AddEventListener to register the Oninput event, we went back to the problem we were trying to solve [divide the browser].
Judging IE browser
How to differentiate IE?
This seems to be a commonplace problem, there are many in the network to find that method, categorized into two categories:
One is to judge the browser's functional properties.
The second is to judge the traditional user-agent string, which is probably the oldest and most popular detection method.
We do not have a thorough understanding here, we use a relatively simple method to judge
Copy CodeThe code is as follows:
if ("\v" = = "V") {
Alert ("IE");
}else{
Alert ("NO");
}
So far the problems we have encountered have been solved, and we have started to write code to test whether our ideas can be implemented.
Complete the Code:
Copy CodeThe code is as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<meta name= "Auther" content= "Fq"/>
<title> Monitor input box values for immediate change Onpropertychange oninput</title>
<script type= "Text/javascript" >
function immediately () {
var element = document.getElementById ("MyText");
if ("\v" = = "V") {
Element.onpropertychange = WebChange;
}else{
Element.addeventlistener ("Input", webchange,false);
}
function WebChange () {
if (element.value) {document.getElementById ("test"). InnerHTML = Element.value};
}
}
</script>
<body>
Examples that are written directly on the page:
Copy CodeThe code is as follows:
<input type= "text" name= "TextField" oninput= "document.getElementById (' webtest '). Innerhtml=this.value;" Onpropertychange= "document.getElementById (' webtest '). Innerhtml=this.value;"/>
<div> The value you entered is: <span id= "webtest" > Not yet entered </span></div>
<br/><br/><br/><br/><br/>
The example written in JS:
<input type= "text" name= "TextField" id= "MyText"/>
<div> The value you entered is: <span id= "Test" > Not yet entered </span></div>
<script type= "Text/javascript" >
Immediately ();
</script>
</body>
Too beautiful, once completed, preview the above code, the page is implemented in 22 ways: first, the page directly referenced in the second, JS reference.
Tested for compatibility with: IE6, IE7, IE8, Firefox, Opera, Chrome, Safari
JS Monitoring input Box value of the immediate change Onpropertychange, Oninput
