JS改变input的value值不触发onchange事件解决⽅案（转）⽅法（⼀）（转载的⽹络资料）
需要了解的知识
⾸先，我们需要了解onchange和onpropertychange的不同：
IE下，当⼀个HTML元素的属性改变的时候，都能通过 onpropertychange来即时捕获。
onchange在属性值改变时还必须使得当前元素失去焦点(onblur)才可以激活该事件。
onpropertychange 是IE浏览器的专属⽅法
了解这⼀点后我们发现onpropertychange的效果就是我们想要的，可是很遗憾，它只在IE下有效果。我们能不能到另外⼀个时间来代替onpropertychange呢？
经过翻阅资料得知，在其他浏览器下可以使⽤oninput事件来达到同样的效果，真是太好了，我们只需要把IE浏览器区分出来就可以。oninput的使⽤
下⾯我们先了解⼀下oninput如何使⽤。
如果您是将注册时间直接写在页⾯⾥⾯，那么如下写法就可以实现
<input type="text" name="textfield" oninput="alert(this.value);" onpropertychange="alert(this.value)" />
但是，将oninput写在JS代码中分离出来时与普通事件注册的⽅法有些不同，必须使⽤addEventListener来注册。
ttachEvent和addEventListener 的不同
说到这⾥我们再来了解⼀下 attachEvent和addEventListener 的使⽤⽅法：
attachEvent⽅法，为某⼀事件附加其它的处理事件。（不⽀持Mozilla系列）
addEventListener⽅法⽤于 Mozilla系列
如果这样写，那么将会只有medhot3被执⾏
var btn1Obj = ElementById("btn1");
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);
执⾏顺序为method3->method2->method1
如果是Mozilla系列，并不⽀持该⽅法，需要⽤到addEventListener
var btn1Obj = ElementById("btn1");
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);
执⾏顺序为method1->method2->method3
了解了如何使⽤addEventListener来注册oninput事件后我们再回到要解决的问题[划分浏览器]。
判断IE浏览器
如何将IE区分出来呢？
这似乎是⼀个⽼⽣常谈的问题，⽹络中有很多那个⽅法，归类为两类：
input绑定onblur事件其⼀，是判断浏览器的功能属性。
其⼆，就是判断传统的 user-agent 字符串，这可能是最古⽼也是最流⾏的检测⽅式。
在这⾥就不做深⼊了解了，我们这⾥⽤⼀种⽐较简单的⽅法来判断
if("\v"=="v") {
alert("IE");
}else{
alert("NO");
}
到⽬前为⽌我们遇到的问题就已经解决了，开始写代码来测试我们的思路是否能够实现。
更改为使⽤js往input⾥⾯加载值！
实践证明在IE中可以，在⽕狐中不可以！猜测可能是在⽕狐中不适⽤!于是使⽤了⽅法（⼆），⽅法(⼆)是⽐较笨重的⼀种⼿法，花了很多事情去测试和更改⽅法⼆，但并没有达到我要的效果!况且有计时器的存在，会影响到⼀定的效率问题！⽅法（⼆）并不是说不是好做法，只是适⽤于什么地⽅，有可能以后⼜需要的地⽅还得使⽤呢！
那这样的话，⽅法⼆我们都不⽤看了！
在不断的尝试中发现，⽅法⼀并不是不可⽤，只是，从⽹上看到的代码存在⼀点问题。只能说，为什么这些⽂章上传地有点草率了，给后来⼈带了不少⿇烦。就这么⼀点点的错误就可以让我们不断尝试呀！为了不让更多的⼈尝试，希望这篇⽂章能给纠正⼀下!
其实，主要修改为：给⽅法加上()
改为:ElementById("mytext").addEventListener("input",changeValue(),false);
以下为实验代码：（IE可⾏，⽕狐可⾏）
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%
String path = ContextPath();
String basePath = Scheme()+"://"+ServerName()+":"+ServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<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(){
init();
}
function addValue2(){
init();
}
function changeValue(){
}
function init(){
if("\v"=="v"){//IE浏览器
}else{ // 其他浏览器
}
}
</script>
</head>
<body>
<input type="button" id="txts"  value="点击加载值!" onclick="addValue();"/>
<input type="button" id="txts2"  value="第⼆次改加载值!" onclick="addValue2();"/>
<input type="text" name="textfield" id="mytext"/>
<div>您输⼊的值为：<input id="webtest"></input></div>
</body>
</html>
（⽅法⼆）（转载的⽹络资料）
实时监听js改变value，跨浏览器⽀持
有两个⽂本框，其中⼀个只读，另⼀个可以输⼊。要求在可输⼊⽂本框中输⼊⽂本时，只读⽂本框能够获得输⼊的值，且只读⽂本框旁边出现提⽰信息，实时显⽰只读⽂本框的内容。
这个功能看是简单，但其实并没有想象的那么简单。（注意，可输⼊框的处理没什么可讨论的，关键是只读框的处理）
⼀开始，我们⼀般会想到在只读⽂本框上运⽤onchange事件。⼀试，发现onchange根本没⽤，该事件是在⽂本框获得焦点，然后内容改变失去焦点后才触发的，现在在只读⽂本框上根本没有这些，它的内容是通过js改变的。于是，需要寻另外的⽅法。
这时，在⽹上到了onpropertychange事件。该事件在⽂本框属性改变时触发，不管是通过什么⽅式改变的。注意，是属性改变，⽽不仅仅是value改变。⼀试，果然好使。然⽽，这个事件是IE专有的。WEB开发，必须得考虑浏览器的兼容问题。于是继续摸索……
在⽹上有看到了另外⼀个事件：oninput。⽹上到处都是：fireFox中的该事件与IE中onpropertychange的事件等同。然⽽，我⼀试，发现根本不等同。oninput事件在fireFox中似乎没有起作⽤。经过⼀段时间测试，终于明⽩，原来oninput并⾮与 onpropertychange等同（⽹上到处到处乱转贴，也不认真测试⼀下）。oninput只在⽤户输⼊值改变时触发（即value改变），并⾮所有属性改变时触发，⽽且，通过js改变value时，oninput不会触发。这下郁闷了。好不容易看到点希望，⼜再次陷⼊了失望，还好没有绝望……哎，浏览器兼容问题真是⿇烦。左思右想，总有⼜有了眉⽬。对于fireFox等浏览器，可以通过定时器检查只读⽂本框的内容是否改变。测试后，终于⼤功告成。下⾯把代码贴出来与⼤家分享。
在IE中的效果：
FireFox中的效果图：
另外，我还在google Chrome测试也成功了（跟fireFox⼀样的）。
HTML代码:
view plaincopy to clipboardprint?
<table>
<tr>
<td>此处值通过js设置：</td>
<td><input id="jsUserName" type="text" name="jsUserName" readonly/></td>
</tr>
<tr>
<td>此处输⼊值：</td>
<td><input id="userName" type="text" name="userName"/></td>
</tr>
</table>
<table>
<tr>
<td>此处值通过js设置：</td>
<td><input id="jsUserName" type="text" name="jsUserName" readonly/></td>
</tr>
<tr>
<td>此处输⼊值：</td>
<td><input id="userName" type="text" name="userName"/></td>
</tr>
</table>
JavaScript代码：
view plaincopy to clipboardprint?
$(function()
{
var jsUserName = "";
if($.browser.msie)  // IE浏览器
{
$("#userName").get(0).onpropertychange = setJsUserName;
$("#jsUserName").get(0).onpropertychange = handle;
}
else    // 其他浏览器
{
var intervalName;  // 定时器句柄
$("#userName").get(0).addEventListener("input",setJsUserName,false);
// 获得焦点时，启动定时器
$("#userName").focus(function(){
intervalName = setInterval(handle,1000);
});
// 失去焦点时，清除定时器
$("#userName").blur(function()
{
clearInterval(intervalName);
});
}
// 设置jsUserName input的值
function setJsUserName()
{
$("#jsUserName").val($(this).val());
}
// jsUserName input的值改变时执⾏的函数
function handle()
{
// IE浏览器此处判断没什么意义，但为了统⼀，且提取公共代码⽽这样处理。
if($("#jsUserName").val() != jsUserName)
{
$("#toolTip").remove();
$("#jsUserName").parent().append("<span id='toolTip'>看到这⾥的信息表明，通过js改变input的值也
能响应相应事件：< span  mce_>" + $("#jsUserName").val() + "</span></span>");
jsUserName = $("#jsUserName").val();
}
}
});
$(function()
{
var jsUserName = "";
if($.browser.msie) // IE浏览器
{
$("#userName").get(0).onpropertychange = setJsUserName;
$("#jsUserName").get(0).onpropertychange = handle;
}
else // 其他浏览器
{
var intervalName; // 定时器句柄
$("#userName").get(0).addEventListener("input",setJsUserName,false);
// 获得焦点时，启动定时器
$("#userName").focus(function(){
intervalName = setInterval(handle,1000);
});
// 失去焦点时，清除定时器
$("#userName").blur(function()
{
clearInterval(intervalName);
});
}
// 设置jsUserName input的值
function setJsUserName()
{
$("#jsUserName").val($(this).val());
}
// jsUserName input的值改变时执⾏的函数
function handle()
{
// IE浏览器此处判断没什么意义，但为了统⼀，且提取公共代码⽽这样处理。
if($("#jsUserName").val() != jsUserName)
{
$("#toolTip").remove();
$("#jsUserName").parent().append("<span id='toolTip'>看到这⾥的信息表明，通过js改变input的值也能响应相应事件：<
span  mce_>" + $("#jsUserName").val() + "</span></span>");
jsUserName = $("#jsUserName").val();
}
}
});
说明：为了⽅便，js代码使⽤了jQuery。不使⽤是⼀样的。
另外，考虑性能问题，可以考虑何时启动定时器和清除定时器以及定时器延时时间。
总结：
1、onchange事件与onpropertychange事件的区别：
onchange事件在内容改变（两次内容有可能还是相等的）且失去焦点时触发；onpropertychange事件却是实时触发，即每增加或删除⼀个字符就会触发，通过js改变也会触发该事件，但是该事件IE专有。
2、oninput事件与onpropertychange事件的区别：
oninput事件是IE之外的⼤多数浏览器⽀持的事件，在value改变时触发，实时的，即每增加或删除⼀个字符就会触发，然⽽通过js改变value 时，却不会触发；onpropertychange事件是任何属性改变都会触发的，⽽oninput却只在value改变时触发，oninput要通过addEventListener()来注册，onpropertychange注册⽅式跟⼀般事件⼀样。（此处都是指在js中动态绑定事件，以实现内容与⾏为分离）3、oninput与onpropertychange失效的情况：
（1）oninput事件：a). 当脚本中改变value时，不会触发；b). 从浏览器的⾃动下拉提⽰中选取时，不会触发。
（2）onpropertychange事件：当input设置为disable=true后，onpropertychange不会触发。
取巧⽅式：
  jQuery.fn.val⽅法来赋值本来就不触发change事件，但是可以⼿动触发。
如：$('#inp').val(3353).change();

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。