在focus时间修改className, 用户输入第一个字符不触发propertychange?IE bug?

XDvlper 2009-06-02 08:56:28

简单页面代码如下, 可以重现:
<!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>
<title></title>
</head>
<body>
<input type="text" id="t" />
<div id="console" />
<script type="text/javascript">
var messageCount = 1;
function output(message) {
var console = document.getElementById("console");
console.innerHTML += messageCount++ + ": " + message + "<br/>";
};

var t = document.getElementById("t");
var tv = document.getElementById("tv");

t.attachEvent("onfocus", function() {
output("focus");
t.value = "";
t.className = "";
});
t.attachEvent("onblur", function() {
output("blur");
});
t.attachEvent("onpropertychange", function(e) {
output("propertychange: "+e.propertyName);
});
</script>
</body>
</html>
步骤:
1. 在输入框中输入一个字符, 如a;
2. 点击页面其他地方, 使输入框失去焦点
3. 再次在输入框中输入一个字符, 此时的这个操作不会触发propertychange; 但是之后再输入字符都会触发

...全文

332 14 打赏收藏转发到动态举报

写回复

用AI写文章

14 条回复

切换为时间正序

请发表友善的回复…

发表回复

jcyu1980 2011-02-10

打赏
举报

propertychange 这个东西只在IE下支持，在FF下用不了，要想在多数浏览器下都能成功，应该用什么？至少IE跟FF都要能用啊，onchange好像只作用于键盘输入的样子，后台JS去修改值之类的好像不会触发

mier963 2010-02-04

打赏
举报

不是bug,而是你用js修改input的值的时候也会触发propertychange事件,所以连续触发了

XDvlper 2009-06-05

打赏
举报

我倒没有碰到IE会死的情况, 就现在来看, 我也只能是认为IE的Bug, 也不确定是什么导致的, 在网上我也没有搜到任何和这个有关的bug描述. 总不至于我是第一个碰到这种bug并在网上讨论的吧?
真郁闷啊...
大家要是还有什么补充的, 欢迎继续讨论, 最好能找到确切的原因, 不然以后碰到个类似的又崩溃了....我找到这个select的解决办法, 还是我问了些同事, 他们碰巧用这个解决的. 下次可不一定这么好运了

如果下个星期依然没有结果, 我就给分结帖了

redhat4 2009-06-03

打赏
举报

有注意到这个问题

XDvlper 2009-06-03

打赏
举报

[Quote=引用 3 楼 hbhbhbhbhb1021 的回复:]
问题在于不能连续的修改value和className
[/Quote]
我现在在实现一个Watermark的功能, 在onfocus的时候却是需要清空value, 并且换一个CSS class, 不连续修改怎么办呢?
这个确实是IE的bug吗?真正的原因就是连续的修改value和className?

hbhbhbhbhb1021 2009-06-03

打赏
举报

楼主精神可嘉啊，在IE下，方法就按我或者石头那样都可以解决。原因我猜是IE的BUG（因为在我这里，模拟出这个问题之后再点刷新，IE必会死掉），onpropertychange这个事件我估计是用了类似计数器或者类似栈之类的东东

cloudgamer 2009-06-03

打赏
举报

难道是bug？

cb1156 2009-06-03

打赏
举报

学习..

XDvlper 2009-06-03

打赏
举报

嗯, 这个方法我刚也试过了, 是可以的, 只需t.select()就能解决, 连document.selection.clear();都不需要, 如果value确实为空...
我想知道到底为什么呢?为什么会有这样的问题?为什么t.select()就解决了呢?

dh20156 2009-06-03

打赏
举报

如果IE Only的话，这样处理一下：



<!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>

<title>test</title>

<style type="text/css">

.a{background:#0f0;}

.b{background:#f00;}

</style>

</head>

<body>

    <input type="text" id="t" class="a" />

    <div id="console" />

    <script type="text/javascript">

        var messageCount = 1;

        function output(message) {

            var console = document.getElementById("console");

            console.innerHTML += messageCount++ + ": " + message + " <br/>";

        };

       

        var t = document.getElementById("t");

        var tv = document.getElementById("tv");



        t.attachEvent("onfocus", function() {

            output("focus");

            t.select();document.selection.clear();//修正此处

            t.className = 'b';//测试修改样式

        });

        t.attachEvent("onblur", function() {

            output("blur");

            t.className = 'a';//测试修改样式

        });

        t.attachEvent("onpropertychange", function(e) {

            output("propertychange: "+e.propertyName);

        });

    </script>

</body>

</html>

浪尖赏花 2009-06-02

打赏
举报

[Quote=引用 3 楼 hbhbhbhbhb1021 的回复:]
问题在于不能连续的修改value和className

HTML code
<!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>
<title> </title>
</head>
<body>
<input type="text" id="t" />
<div id="console" />
<script type="text/javascript">
var messageCo…
[/Quote]
up,把t.className = "";注掉就没问题,可是这怎么解释呢?
纳闷...

hbhbhbhbhb1021 2009-06-02

打赏
举报

问题在于不能连续的修改value和className



<!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> 

    <title> </title> 

</head> 

<body> 

    <input type="text" id="t" /> 

    <div id="console" /> 

    <script type="text/javascript"> 

        var messageCount = 1; 

        function output(message) { 

            var console = document.getElementById("console"); 

            console.innerHTML += messageCount++ + ": " + message + " <br/>"; 

        }; 

        

        var t = document.getElementById("t"); 

        var tv = document.getElementById("tv"); 



        t.attachEvent("onfocus", function() { 

            output("focus"); 

            t.value = ""; 

		setTimeout(function(e){return function(){e.className=""}}(t),20)

            //t.className = ""; 

        }); 

        t.attachEvent("onblur", function() { 

            output("blur"); 

        }); 

        t.attachEvent("onpropertychange", function(e) { 

            output("propertychange: "+e.propertyName); 

        }); 

    </script> 

</body> 

</html>