js监控输入框变化（input propertychange change）

最新推荐文章于 2023-12-29 23:26:56 发布

原创最新推荐文章于 2023-12-29 23:26:56 发布 · 1.7w 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#input #propertychange #change #onload

js 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了三种使用JavaScript监听文本输入框变化的方法，并提供了可以直接运行的示例代码。这些方法适用于不同的浏览器环境，包括IE和现代浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天做网页要用到监听输入框变化，找到了几种不同方案，做一下记录，以下示例可直接粘贴到html文件在本地执行预览。

方法一：

参考博客：https://blog.youkuaiyun.com/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.youkuaiyun.com/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>