关于 onchange，onpropertychange，oninput事件

转载于：https://www.cnblogs.com/aigeileshei/p/5682303.html
https://www.cnblogs.com/aigeileshei/p/5682303.html

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

方法（一）（转载的网络资料）

需要了解的知识
首先，我们需要了解onchange和onpropertychange的不同：
IE下，当一个HTML元素的属性改变的时候，都能通过 onpropertychange来即时捕获。

onchange在属性值改变时还必须使得当前元素失去焦点(onblur)才可以激活该事件。

onpropertychange 是IE浏览器的专属方法

了解这一点后我们发现onpropertychange的效果就是我们想要的，可是很遗憾，它只在IE下有效果。我们能不能找到另外一个时间来代替onpropertychange呢？

经过翻阅资料得知，在其他浏览器下可以使用oninput事件来达到同样的效果，真是太好了，我们只需要把IE浏览器区分出来就可以。
oninput的使用
下面我们先了解一下oninput如何使用。
如果您是将注册时间直接写在页面里面，那么如下写法就可以实现

但是，将oninput写在JS代码中分离出来时与普通事件注册的方法有些不同，必须使用addEventListener来注册。
ttachEvent和addEventListener 的不同

说到这里我们再来了解一下 attachEvent和addEventListener 的使用方法：

attachEvent方法，为某一事件附加其它的处理事件。（不支持Mozilla系列）
addEventListener方法用于 Mozilla系列
document.getElementById(“btn”).onclick = method1;
document.getElementById(“btn”).onclick = method2;
document.getElementById(“btn”).onclick = method3;

如果这样写,那么将会只有medhot3被执行

var btn1Obj = document.getElementById(“btn1”);
btn1Obj.attachEvent(“onclick”,method1);
btn1Obj.attachEvent(“onclick”,method2);
btn1Obj.attachEvent(“onclick”,method3);

执行顺序为method3->method2->method1
如果是Mozilla系列，并不支持该方法，需要用到addEventListener

var btn1Obj = document.getElementById(“btn1”);
btn1Obj.addEventListener(“click”,method1,false);
btn1Obj.addEventListener(“click”,method2,false);
btn1Obj.addEventListener(“click”,method3,false);
执行顺序为method1->method2->method3

了解了如何使用addEventListener来注册oninput事件后我们再回到要解决的问题[划分浏览器]。

判断IE浏览器

如何将IE区分出来呢？
这似乎是一个老生常谈的问题，网络中有很多找那个方法，归类为两类：
其一，是判断浏览器的功能属性。
其二，就是判断传统的 user-agent 字符串，这可能是最古老也是最流行的检测方式。
在这里就不做深入了解了，我们这里用一种比较简单的方法来判断

if("\v"==“v”) {
alert(“IE”);
}else{
alert(“NO”);
}

到目前为止我们遇到的问题就已经解决了，开始写代码来测试我们的思路是否能够实现。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="auther" content="fq" /><title>监听输入框值的即时变化 onpropertychange  oninput</title><script type="text/javascript">function immediately(){var element = document.getElementById("mytext");if("\v"=="v") {element.onpropertychange = webChange;}else{element.addEventListener("input",webChange,false);}} function webChange(){if(element.value){document.getElementById("test").innerHTML = element.value};}</script>
</head>
<body>// 直接写在页面中的示例：<input type="text" name="textfield" oninput="document.getElementById('webtest').innerHTML=this.value;" onpropertychange="document.getElementById('webtest').innerHTML=this.value;" /><div>您输入的值为：<span id="webtest">还未输入</span></div><br /><br /><br /><br /><br />写在JS中的示例：<input type="text" name="textfield" id="mytext" /><div>您输入的值为：<span id="test">还未输入</span></div>
<script type="text/javascript">immediately();
</script>
</body>
</html>

更改为使用js往input里面加载值！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="auther" content="fq" /><title>监听输入框值的即时变化 onpropertychange  oninput</title>
<script type="text/javascript">function immediately(){var element = document.getElementById("mytext");if("\v"=="v") {element.onpropertychange = webChange;}else{element.addEventListener("input",webChange,false);}}   function webChange(){if(element.value){document.getElementById("test").innerHTML = element.value};}function addValue(){document.getElementById("mytext").value='dfdsafdsfsfsdfsdfdsf';document.getElementById("mytext2").value='dfdsafdsfsfsdfsdfdsf';}
</script>
</head>
<body><input type="button" id="txts"  value="点击加载值!" onclick="addValue();"/>//直接写在页面中的示例：<input type="text" id="mytext2" name="textfield" oninput="document.getElementById('webtest').innerHTML=this.value;" onpropertychange="document.getElementById('webtest').innerHTML=this.value;" /><div>您输入的值为：<span id="webtest">还未输入</span></div><br /><br /><br /><br /><br />//写在JS中的示例：<input type="text" name="textfield" id="mytext" /><div>您输入的值为：<span id="test">还未输入</span></div>
<script type="text/javascript">immediately();
</script>
</body>
</html>

实践证明在IE中可以，在火狐中不可以！猜测可能是在火狐中不适用!于是使用了方法（二），方法(二)是比较笨重的一种手法，花了很多事情去测试和更改方法二，但并没有达到我要的效果!况且有计时器的存在，会影响到一定的效率问题！方法（二）并不是说不是好做法，只是适用于什么地方，有可能以后又需要的地方还得使用呢！

那这样的话，方法二我们都不用看了！

在不断的尝试中发现，方法一并不是不可用，只是，从网上看到的代码存在一点问题。只能说，为什么这些文章上传地有点草率了，给后来人带了不少麻烦。就这么一点点的错误就可以让我们不断尝试呀！为了不让更多的人尝试，希望这篇文章能给纠正一下!

其实，主要修改为：给方法加上()

document.getElementById(“mytext”).addEventListener(“input”,changeValue,false);

改为:document.getElementById(“mytext”).addEventListener(“input”,changeValue(),false);

以下为实验代码：（IE可行，火狐可行）

<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+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(){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="点击加载值!" 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代码:

<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代码：

$(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  style="color:red;" mce_style="color:red;">" + $("#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  style="color:red;" mce_style="color:red;">" + $("#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();

转载于：https://www.cnblogs.com/aigeileshei/p/5682303.html

关于 onchange，onpropertychange，oninput事件相关推荐

onchange onpropertychange 和oninput事件的区别
汇总onchange onpropertychange 和oninput事件的区别: 1.onchange事件与onpropertychange事件的区别: onchange事件在内容改变(两次内容 ...
onchange onpropertychange 和 oninput 事件的区别
汇总 onchange onpropertychange 和 oninput 事件的区别 1.onchange 事件与 onpropertychange 事件的区别: onchange 事件在内容改变 ...
oninput事件onpropertychange事件onchange事件textIput事件
oninput事件&onpropertychange事件&onchange事件&textIput事件 oninput事件简介 input,select,textarea元素值 ...
input 中事件 onchange onpropertychange 和oninput事件的差别
汇总onchange onpropertychange 和oninput事件的差别: 1.onchange事件与onpropertychange事件的差别: onchange事件在内容改变(两次内容有 ...
【JavaScript】——input元素的oninput事件和onchange事件
1.oninput事件是在输入框中输入时就会触发,该事件在<input>或<textarea>元素的值发送改变时触发. 2.onchange事件是在输入框输入完内容后,输入框失 ...
input元素的oninput事件和onchange事件
input元素的oninput事件和onchange事件框架用多了,感觉原生的有点弱化了,不说了,是时候巩固一波了 ^ _ ^ 1.input元素上绑定事件的三种方式: 第一种:直接在元素标签上添加 ...
JavaScript中的onchange、oninput以及onpropertychange
一.onchange事件属性 onchange事件可以用于<input>元素和<textarea></textarea>元素,表示当内容改变并且失去焦点后触发,on ...
onchange，onfocus ，oninput事件
compositionstart 在输入一段需要确认的文本如拼音to汉字.语音时会触发 compositionend 在拼音选词完成.语音输入完毕时会触发 addEventListener() 方法 ...
php中input的onclick,onkeydown、onkeyup、onclick、onchange、oninput、onpropertychange 的用法和区别...
onkeydown.onkeyup.onclick onkeydown 是按键按下时触发: onkeyup 是按键弹起时触发: onclick 是按键按下并弹起时触发. 有一种情况,就是按住按键不放, ...
input元素的oninput事件和onchange事件的使用和区别
1.input元素上绑定事件的三种方式: 第一种:直接在元素标签上添加oninput属性,属性值为处理事件函数的调用 html代码: <input type="text" i ...

关于 onchange，onpropertychange，oninput事件

关于 onchange，onpropertychange，oninput事件相关推荐

最新文章

热门文章