运行成果:
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>