Effects to be achieved
In many cases, we will instantly monitor the changes in the input box value to make real-time actions to guide the browser to enhance the user experience of the website. For example, instantly display the number of bytes that have been entered in the input box, or instantly read the input value for search guidance, that is, Google's associated search effect, etc.
As long as we can capture instant events, we can do a lot.
Knowledge required
First, we need to understand the difference between onchange and onpropertychange:
Under IE, when the attributes of an HTML element are changed, they can be captured instantly through onpropertychange.
Onchange must also cause the current element to lose focus (onblur) when the property value changes to activate the event.
After understanding this, we found that the effect of onpropertychange is what we want, but unfortunately, it only has effect in IE. Can we find another time to replace onpropertychange?
After reading the information, it is great that we can use the oninput event to achieve the same effect in other browsers. We just need to distinguish the IE browser.
Use of oninput
Let’s first understand how to use oninput.
If you write the registration time directly on the page, then the following writing method can be implemented:
<input type="text" name="textfield" oninput="alert();" onpropertychange="alert()" />
However, the method of decoding oninput in JS code is somewhat different from the method of registering ordinary events, and you must use addEventListener to register.
The difference between attachEvent and addEventListener
Speaking of this, let’s learn how to use attachEvent and addEventListener:
attachEvent method to attach other processing events to a certain event. (Mozilla series is not supported)
addEventListener method for Mozilla series
Example:
("btn").onclick = method1;
("btn").onclick = method2;
("btn").onclick = method3;
If written like this, then only medhot3 will be executed
Written as follows:
var btn1Obj = ("btn1");
("onclick",method1);
("onclick",method2);
("onclick",method3);
Execution order is method3->method2->method1
If it is the Mozilla series, this method does not support it, and addEventListener is required
var btn1Obj = ("btn1");
("click",method1,false);
("click",method2,false);
("click",method3,false);
Execution order is method1->method2->method3
After understanding how to use addEventListener to register oninput event, we will return to the problem we want to solve [Divide browser].
Judge IE browser
How to distinguish IE?
This seems to be a cliché question. There are many ways to find that method on the Internet, classified into two categories:
First, it is to judge the functional attributes of the browser.
The second is to judge the traditional user-agent string, which may be the oldest and most popular way of detection.
I won't go into the deeper understanding here, we use a relatively simple method to judge
if("\v"=="v") {
alert("IE");
}else{
alert("NO");
}
The problems we encountered so far have been solved. We have started writing code to test whether our ideas can be implemented.
Complete the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="auther" content="fq" />
<title>Open the instant changes in input box values onpropertychange oninput</title>
<script type="text/javascript">
function immediately(){
var element = ("mytext");
if("\v"=="v") {
= webChange;
}else{
("input",webChange,false);
}
function webChange(){
if(){("test").innerHTML = };
}
}
</script>
</head>
<body>
Examples written directly on the page:
<input type="text" name="textfield" oninput="('webtest').innerHTML=;" onpropertychange="('webtest').innerHTML=;" />
<div>The value you entered is: <span > Not entered yet</span></div>
<br /><br /><br /><br /><br />
Example written in JS:
<input type="text" name="textfield" />
<div>The value you entered is: <span > Not entered yet</span></div>
<script type="text/javascript">
immediately();
</script>
</body>
</html>
It's so beautiful. Complete it in one go and preview the above code. There are two ways to implement the page: first, direct reference in the page; second, quotation in JS.
After testing, compatible with: IE6, IE7, IE8, Firefox, Opera, Chrome, Safari
In many cases, we will instantly monitor the changes in the input box value to make real-time actions to guide the browser to enhance the user experience of the website. For example, instantly display the number of bytes that have been entered in the input box, or instantly read the input value for search guidance, that is, Google's associated search effect, etc.
As long as we can capture instant events, we can do a lot.
Knowledge required
First, we need to understand the difference between onchange and onpropertychange:
Under IE, when the attributes of an HTML element are changed, they can be captured instantly through onpropertychange.
Onchange must also cause the current element to lose focus (onblur) when the property value changes to activate the event.
After understanding this, we found that the effect of onpropertychange is what we want, but unfortunately, it only has effect in IE. Can we find another time to replace onpropertychange?
After reading the information, it is great that we can use the oninput event to achieve the same effect in other browsers. We just need to distinguish the IE browser.
Use of oninput
Let’s first understand how to use oninput.
If you write the registration time directly on the page, then the following writing method can be implemented:
<input type="text" name="textfield" oninput="alert();" onpropertychange="alert()" />
However, the method of decoding oninput in JS code is somewhat different from the method of registering ordinary events, and you must use addEventListener to register.
The difference between attachEvent and addEventListener
Speaking of this, let’s learn how to use attachEvent and addEventListener:
attachEvent method to attach other processing events to a certain event. (Mozilla series is not supported)
addEventListener method for Mozilla series
Example:
("btn").onclick = method1;
("btn").onclick = method2;
("btn").onclick = method3;
If written like this, then only medhot3 will be executed
Written as follows:
var btn1Obj = ("btn1");
("onclick",method1);
("onclick",method2);
("onclick",method3);
Execution order is method3->method2->method1
If it is the Mozilla series, this method does not support it, and addEventListener is required
var btn1Obj = ("btn1");
("click",method1,false);
("click",method2,false);
("click",method3,false);
Execution order is method1->method2->method3
After understanding how to use addEventListener to register oninput event, we will return to the problem we want to solve [Divide browser].
Judge IE browser
How to distinguish IE?
This seems to be a cliché question. There are many ways to find that method on the Internet, classified into two categories:
First, it is to judge the functional attributes of the browser.
The second is to judge the traditional user-agent string, which may be the oldest and most popular way of detection.
I won't go into the deeper understanding here, we use a relatively simple method to judge
Copy the codeThe code is as follows:
if("\v"=="v") {
alert("IE");
}else{
alert("NO");
}
The problems we encountered so far have been solved. We have started writing code to test whether our ideas can be implemented.
Complete the code:
Copy the codeThe code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="auther" content="fq" />
<title>Open the instant changes in input box values onpropertychange oninput</title>
<script type="text/javascript">
function immediately(){
var element = ("mytext");
if("\v"=="v") {
= webChange;
}else{
("input",webChange,false);
}
function webChange(){
if(){("test").innerHTML = };
}
}
</script>
</head>
<body>
Examples written directly on the page:
Copy the codeThe code is as follows:
<input type="text" name="textfield" oninput="('webtest').innerHTML=;" onpropertychange="('webtest').innerHTML=;" />
<div>The value you entered is: <span > Not entered yet</span></div>
<br /><br /><br /><br /><br />
Example written in JS:
<input type="text" name="textfield" />
<div>The value you entered is: <span > Not entered yet</span></div>
<script type="text/javascript">
immediately();
</script>
</body>
</html>
It's so beautiful. Complete it in one go and preview the above code. There are two ways to implement the page: first, direct reference in the page; second, quotation in JS.
After testing, compatible with: IE6, IE7, IE8, Firefox, Opera, Chrome, Safari