非IE监听javascript为value赋值
实现IE中的onpropertychange事件，请不要说oninput。试过了无效！请将下页面在不同内核浏览器中打开，实现IE中的效果。向t1输入值，当点击Copy时将...
实现IE中的onpropertychange事件，请不要说oninput。试过了无效！
请将下页面在不同内核浏览器中打开，实现IE中的效果。
向t1输入值，当点击Copy时将t1的值赋给t2，t2触发事件显示t2的值
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Test</title>
<script type="text/javascript" charset="utf-8">
function Onload() {
var btnCopy = document.getElementById("b1");
btnCopy.onclick = onClick;
var txt2 = document.getElementById("t2");
if (txt2.attachEvent)
{
txt2.attachEvent("onpropertychange", onChange);
}
else
{
txt2.addEventListener("input", onChange, false);
}
}
function onClick(e) {
document.getElementById("t2").value = document.getElementById("t1").value;
}
function onChange(e) {
if (document.getElementById("t2").value)
{
alert(document.getElementById("t2").value);
}
}
</script>
</head>
<body onload="Onload()">
<input id="t1" type="text" />
<input id="t2" type="text" onchange="onChange()" oniput="onChange()" />
<input id="b1" type="button" value="Copy" />
</body>
</html> 展开
请将下页面在不同内核浏览器中打开，实现IE中的效果。
向t1输入值，当点击Copy时将t1的值赋给t2，t2触发事件显示t2的值
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Test</title>
<script type="text/javascript" charset="utf-8">
function Onload() {
var btnCopy = document.getElementById("b1");
btnCopy.onclick = onClick;
var txt2 = document.getElementById("t2");
if (txt2.attachEvent)
{
txt2.attachEvent("onpropertychange", onChange);
}
else
{
txt2.addEventListener("input", onChange, false);
}
}
function onClick(e) {
document.getElementById("t2").value = document.getElementById("t1").value;
}
function onChange(e) {
if (document.getElementById("t2").value)
{
alert(document.getElementById("t2").value);
}
}
</script>
</head>
<body onload="Onload()">
<input id="t1" type="text" />
<input id="t2" type="text" onchange="onChange()" oniput="onChange()" />
<input id="b1" type="button" value="Copy" />
</body>
</html> 展开
3个回答
展开全部
oninput与onpropertychange除了使用的浏览器不同，真正用起来还是有很大差别的，比如onpropertychange可以在键盘输入、复制粘贴、用程序修改value属性等几乎任何情况下都会触发，而oninput只能在键盘输入和复制粘贴时才触发，而在程序中直接对value属性赋值是不会触发的。这样就必须另辟蹊径，比如用setAttribute给value属性赋值（不要用=号直接赋值）就会触发DOMAttrModified事件。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
function Onload() {
var btnCopy = document.getElementById("b1");
btnCopy.onclick = onClick;
var txt2 = document.getElementById("t2");
// 支持的浏览器
// IE11, Firefox 14+, Chrome 18+, Safari 6.0+, Opera 15+
// 请搜索MutationObserver，查看怎么用
if (window.MutationObserver || window.webkitMutationObserver) {
var callback = function (mutations) {
console.log(arguments);
mutations.forEach(function (mutation) {
if (mutation.attributeName == "value") {
onChange();
}
});
};
if (window.MutationObserver) {
var observer = new MutationObserver(callback);
} else {
var observer = new webkitMutationObserver(callback);
}
observer.observe(txt2, {
attributes: true
});
} else if (txt2.addEventListener) {
// Firefox, Opera, IE9 开始支持DOMAttrModified event
txt2.addEventListener("DOMAttrModified", function (e) {
if (e.attrName == 'value') {
onChange(e);
}
}, false);
} else if (txt2.attachEvent) {
txt2.attachEvent("onpropertychange", onChange);
}
}
function onClick(e) {
var value = document.getElementById("t1").value;
var txt2 = document.getElementById("t2");
txt2.value = value;
// 要用setAttribute才会触发DOMAttrModified
txt2.setAttribute('value', value);
}
function onChange(e) {
if (document.getElementById("t2").value) {
alert(document.getElementById("t2").value);
}
}更旧版本的浏览器不知道怎么解了。
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
去掉你的
<input id="t2" type="text" onchange="onChange()" oniput="onChange()" />
由于你Onload 方法里面给 t2绑定了事件 就不需要在再绑定事件了
改为
<input id="t2" type="text" />
<input id="t2" type="text" onchange="onChange()" oniput="onChange()" />
由于你Onload 方法里面给 t2绑定了事件 就不需要在再绑定事件了
改为
<input id="t2" type="text" />
追问
请问你在浏览器中打开过吗？
请问你有仔细看过问题吗？
如果没有，那么请你尝试一下。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
