JS implementation of the text box content changes immediately to trigger the incident:
This chapter introduces how to change the content of the text box when the content of the text box is changed, and immediately triggers an event to perform a response operation, rather than like the keydow or keyup event. Code examples do a brief introduction.
1. Related knowledge preparation:
1.ONCHANGE event:
This incident will change when the element content is changed and it is triggered when the focus is lost.
Browser support.
2.onpropertyChange event:
This incident will be triggered immediately when the element content changes, and this event is triggered even through the content of JS.
Any attribute changes in the
element will trigger the event, not just value.
Only browser below IE11 supports this incident.
3.ONINPUT event:
This incident will be triggered when the value attribute value is changed, and the value of the value attribute is not triggered by JS.
Only be supported by standard browsers such as IE8 or Google Firefox.
2. Code instance:
Since we know the characteristics of each event, we can realize the code compatible with each browser through compatibility methods.
code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>JS implementation of the text box content changes immediately to trigger the incident, a brief introduction</title>
<script type="text/javascript">
window.onload=function(){
var otxt=document.getElementById("txt");
var oshow=document.getElementById("show");
var count=0;
if(document.all){
otxt.onpropertychange=function(){
count=count+1;
oshow.innerHTML=count;
}
}
else{
otxt.oninput=function(){
count=count+1;
oshow.innerHTML=count;
}
}
}
</script>
</head>
<body>
<div id="show"></div>
<input type="text" id="txt" value="zkl"/>
</body>
</html>The above your code is basically compatible with each browser. The code implementation process is not introduced here.