当前输入框高亮显示

输入框高亮

HTML

<form class="container">
    <h2>用户登录</h2>
    <div class="content">
        <!--<p><label>用户名：</label><input class="f-text" type="text"></p>-->
        <span style="margin-right: 2px; margin-bottom: 10px">用户名:</span>
        <input class="f-origin" type="text" style="margin-bottom: 10px"><br>
        <span style="margin-right: 3px;margin-left: 10px">密码:</span>
        <input class="f-origin" type="password">
    </div>
    <button class="login">登录</button>
</form>

CSS

.container {
            width: 400px;
            margin:0 auto;
            background-color: rgb(254, 244, 235);
            border: 1px solid orangered;
        }
        h2 {
            //h2不应该设置width,一旦margin改变,h2就会超出父元素或留白
            //width: 392px;
            margin: 0;
            color: orangered;
            background-color: rgb(255, 235, 215);
            padding: 3px;
            border-bottom: 1px solid orangered;
        }
        .content {
            width: 220px;
            margin: 20px auto;
        }
        .f-origin {
            background-color: rgb(255,253,236);
            border-radius: 3px;
        }
        .login {
            width: 87px;
            background-color: orangered;
            padding: 5px 30px;
            border-radius: 3px;
            border: none;
            color: #ffffff;
            margin-bottom: 10px;
            text-align: center;
            margin-left: 132px;
        }
        .f-text {
            background-color: rgb(255,231,231);
        }

JS

window.onload = function () {
        var aInput = document.getElementsByTagName('input');
        for (var i=0; i<aInput.length; i++) {
            aInput[i].onfocus = function () {
                this.className = 'f-text';
            }
            aInput[i].onblur = function () {
                this.className = 'f-origin';
            }
        }
    }

onfocus当元素获得焦点时触发
onblur当元素失去焦点时触发
className用于js中改变类名, 在之前的实例中使样式为默认样式就应该用这个,一直知道这个属性,竟然没想到

在其他人的代码中, 用户名,密码以及登录按钮的HTML都是这样

<p><label>用户名</label><input type="text" class="f-text" /></p>

按钮也是这样,只是type不同, <label></label>没有值也写在里面, 设置label宽度, 所以按钮与输入框左对齐, 循环所有tagName为input的元素, 当按钮元素获得焦点时也可以改变按钮的背景色