Javascript控制文本框背景色

<!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>Javascript控制文本框背景色</title>
</head>
<body onload="InitEvent()">
    <input type="text" /><br />
    <br />
    <input type="text" /><br />
    <br />
    <input type="text" /><br />
    <br />
    <input type="button" value="asdfasdf" /><br />
</body>
</html>

<script type="text/javascript" language="javascript">
    //方法一：
    //    function InitEvent() {
    //        var inputs = document.getElementsByTagName("input");
    //        for (var i = 0, j = inputs.length; i < j; i++) {
    //            inputs[i].onfocus = InputOnfocus;
    //        }
    //    }
    //    function InputOnfocus() {
    //        var inputs = document.getElementsByTagName("input");
    //        for (var i = 0, j = inputs.length; i < j; i++) {
    //            if (inputs[i] == this) {
    //                this.style.background = "Yellow";
    //            } else {
    //                inputs[i].style.background = "white";
    //            }
    //        }
    //    }
    //方法二：
    function InitEvent() {
        var inputs = document.getElementsByTagName("input");
        for (var i = 0, j = inputs.length; i < j; i++) {
            //只有类型为text的input才加事件
            if (inputs[i].type == "text") {
                inputs[i].onfocus = InputOnfocus;
                inputs[i].onblur = InputOnblur;
            }
        }
    }
    function InputOnfocus() {
        this.style.background = "Yellow";
    }
    function InputOnblur() {
        this.style.background = "white";
    }
</script>

 

posted @ 2013-04-25 11:55  ipangjie  阅读(577)  评论(0)    收藏  举报