JS改变input的value值不触发onchange事件解决方案

最新推荐文章于 2022-07-28 11:33:59 发布

ghlfllz

最新推荐文章于 2022-07-28 11:33:59 发布

阅读量1.4w

点赞数

分类专栏： Web开发

Web开发专栏收录该内容

35 篇文章

订阅专栏

本文提供了一个实测在IE11和Chrome浏览器中可行的解决方案，通过修改JavaScript代码来避免在改变input元素值时触发onchange事件。包括具体代码示例和实际应用案例。

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

JS改变input的value值不触发onchange事件解决方案

实测IE11, Chrome可行，代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
<meta charset="utf-8" />   
    <title>My JSP 'testInput.jsp' starting page</title>
    
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">    
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
<script type="text/javascript">
function addValue(){
   document.getElementById("mytext").value='dfdsafdsfsfsdfsdfdsf';
   init();
}
function addValue2(){
    document.getElementById("mytext").value='哈哈哈哈';
    init();
}
function changeValue(){
    document.getElementById("webtest").value=document.getElementById("mytext").value;
}
function init(){
   if("\v"=="v"){//IE浏览器
    document.getElementById("mytext").onpropertychange=changeValue;
   }else{ // 其他浏览器
 document.getElementById("mytext").addEventListener("input",changeValue(),false);
   }
  }
</script>
  </head>
  <body>
    <input type="button" id="txts"  value="点击加载值!" οnclick="addValue();"/>
    <input type="button" id="txts2"  value="第二次改加载值!" οnclick="addValue2();"/>
    <input type="text" name="textfield" id="mytext"/>
    <div>您输入的值为：<input id="webtest"></input></div>
  </body>
</html>

更进一步的内容请参考：

http://blog.youkuaiyun.com/zhbitxhd/article/details/12943091