[读码时间]当前输入框高亮显示

说明：代码取自网络，注释为笔者学习时添加！

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>当前输入框高亮显示</title>
    <style>
        body,form,h2,p,input{/*去除内外边距*/
            margin:0;
            padding:0;
        }
        body{
            color:#4f4f4f;/*黑色*/
            font:14px/1.5 \5fae\8f6f\96c5\9ed1;
        }
        form{
            width:400px;
            background:#fef4eb;/*灰色*/
            border:2px solid #f60;/*桔红色*/
            padding-bottom:10px;
            overflow:hidden;
            zoom:1;
            margin:10px auto;/*左右置中*/
        }
        form h2{
            color:#fe791e;
            font-size:16px;
            background:#ffebd7;
            border-bottom:2px solid #f60;
            padding:5px 10px;
        }
        form p{
            float:left;
            clear:both;/*清除浮动*/
            width:100%;
            height:31px;
            margin-top:10px;
            line-height:31px;
        }
        form label,form input{
            float:left;/*左浮动*/
        }
        form label{
            width:100px;
            height:31px;
            text-align:right;
        }
        form input{
            border:0;
            font-family:\5fae\8f6f\96c5\9ed1;
            background:url(img/input.png) no-repeat;
        }
        form .f-text, form .f-text-high{
            width:203px;
            height:31px;
            padding-left:5px;
            line-height:31px;
        }
        form .f-text-high{
            background-position:0 -31px;/*上移*/
        }
        form .f-btn{
            color:#fff;
            width:104px;
            height:31px;
            cursor:pointer;
            font-size:16px;
            background:#f60;
            line-height:31px;
            border-radius:5px;/*圆角*/
        }
    </style>
    <script>
        //通过上移图片位置，从而显示不同的背景
        window.onload = function () {
            var aInput = document.getElementsByTagName("input");//获取所有input引用
            var i = 0;
            for (i = 0; i < aInput.length - 1; i++) {
                aInput[i].onfocus = function () {
                    this.className = "f-text-high";
                };
                aInput[i].onblur = function () {
                    this.className = "f-text";
                }
            }
        };
    </script>
</head>
<body>
    <form>
        <h2>用户登录</h2>
        <p><label>用户名：</label><input class="f-text" type="text" /></p>
        <p><label>密码：</label><input class="f-text" type="password" /></p>
        <p><label></label><input class="f-btn" type="button" value="登录" /></p>
    </form>
</body>
</html>
View Code

 

posted @ 2017-03-02 02:21  sx00xs  阅读(222)  评论(0)    收藏  举报