今天做网页要用到监听输入框变化,找到了几种不同方案,做一下记录,以下示例可直接粘贴到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.οnlοad=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.οninput=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.οnlοad=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.οninput=function(){
count=count+1;
oshow.innerHTML=count;
}
}
}
function _addLoadEvent(func)
{
var oldοnlοad=window.onload;
if(typeof window.onload != 'function')
{
window.οnlοad=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.οninput=function(){
count=count+1;
oshow.innerHTML=count;
}
}
}
</script>
</head>
<body>
<div id="show"></div>
<input type="text" id="txt" value="ssh"/>
</body>
</html>