js监控输入框变化(input propertychange change)

今天做网页要用到监听输入框变化,找到了几种不同方案,做一下记录,以下示例可直接粘贴到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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值