JS 焦点事件

input{
    width:200px;
    height:20px;
    border:solid 1px #ddd;
}
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" id="username" />
<span id="span" style="font-size:12px;display:none">请输入您的用户名</span>

<script type="text/javascript">
    var username = document.getElementById('username');
    var span = document.getElementById('span');
    //on当...时候  focus焦点
    username.onfocus = function() {
        // alert('我得宠了!!!');
        this.style.border = "solid 1px blue";
        span.style.display = 'inline';
    }

    //丧失焦点事件
    username.onblur = function() {
        // alert('我失宠了!!!');
        this.style.border = 'solid 1px red';
    }
</script>