DOM第一天作业--世纪佳缘登录框--pink老师

运行成果：

 

HTML代码块

 <div class="register">
      <input type="text" class='ipt' value="邮箱/ID/手机号">
      <input type="password" class='pwd' placeholder="密码">
      <button>登录</button>
 </div>

---

CSS样式

div {
    width: 600px;
    margin: 100px auto;
}

input {
    display: inline-block;
    box-sizing: border-box;
    color: #999;
    margin-right: 10px;
    outline: none;
    padding: 2px 0 2px 10px;
    height: 25px;
    width: 136px;   
    border: 1px solid #ccc;
 }

.change {
    outline-color: pink;
 }

button {
    background-color: #0098c2;
    color: white;
    border: none;
    height: 25px;
    width: 67px;
}

---

JavaScript 代码段

<script>
        var text = document.querySelector('.ipt');
        var pwd = document.querySelector('.pwd')
        text.onfocus = function () {
            if (this.value === '邮箱/ID/手机号') {
                this.value = '';
                this.className = 'change';
            }
            this.style.color = '#b5b2bd';
        }
        text.onblur = function () {
            if (this.value === '') {
                this.value = '邮箱/ID/手机号';
            }
        }
        pwd.onfocus = function () {
            if (this.placeholder === '密码') {
                this.text = 'text';
                this.placeholder = '';
                this.className = 'change';
            }
        }

        pwd.onblur = function () {
            if (this.placeholder === '') {
                this.placeholder = '密码';
                this.text = 'password';
                this.className = '';
            }
        }
 </script>