Today, I need to monitor the changes of the input box to make a web page. I found several different solutions and made a record. The following example can be directly pasted into the html file to perform the preview locally.
method one:
Reference blog: https://blog.csdn.net/otengyue/article/details/50708277
<!DOCTYPE html> <html> <head> <title> js monitor input box changes</title> <script type="text/javascript"> var oshow=document.getElementById("show"); var count=0; $("#txt").bind("input propertychange change",function(event){ count=count+1; oshow.innerHTML=count; }); </script> </head> <body> <div id="show"></div> <input type="text" id="txt" value="ssh"/> </body> </html>
Method Two:
Reference blog: https://blog.csdn.net/stu_zkl/article/details/53223235
<!DOCTYPE html> <html> <head> <title>js monitor input box changes</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="ssh"/> </body> </html>Method 3:
This method can be used when there is a conflict in method 2.
<!DOCTYPE html> <html> <head> <title> js monitor input box changes</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; } } } function _addLoadEvent(func) { var oldonload=window.onload; if(typeof window.onload != 'function') { window.onload=func; } else { oldonload(); func(); } } _addLoadEvent(spring_x); function spring_x(){ 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="ssh"/> </body> </html>