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

简单页面代码如下, 可以重现:
<!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; 但是之后再输入字符都会触发

解决方案 »

  1.   

    没有弄懂楼主的 意思，但是最好不要用propertychange事件，因为只有IE支持它。
      

  2.   

    问题在于不能连续的修改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> 
      

  3.   

    up,把t.className = "";注掉就没问题,可是这怎么解释呢?
    纳闷...
      

  4.   

    我现在在实现一个Water的功能, 在onfocus的时候却是需要清空value, 并且换一个CSS class, 不连续修改怎么办呢?
    这个确实是IE的bug吗?真正的原因就是连续的修改value和className?
      

  5.   

    如果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> 
      

  6.   

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

  7.   

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

  8.   

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

  9.   

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

  10.   

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