今天做网页要用到监听输入框变化,找到了几种不同方案,做一下记录,以下示例可直接粘贴到html文件在本地执行预览。
方法一:
参考博客:https://blog.csdn.net/otengyue/article/details/50708277
<!DOCTYPE html> <html> <head> <title> js监控输入框变化</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>
方法二:
参考博客:https://blog.csdn.net/stu_zkl/article/details/53223235
<!DOCTYPE html> <html> <head> <title>js监控输入框变化</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>方法三:
当方法二有冲突时可以用此方法解决。
<!DOCTYPE html> <html> <head> <title> js监控输入框变化</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>