代码实现如下:
1.HTML部分:
<body>
<input type="text" value="邮箱/ID/手机号" class="uname">
<input type="text" value="密码" class="pwd">
<button>登录</button>
</body>
2.CSS部分:
<style>
input {
border: 1px solid #d9d9d9;
outline: none;
color: #b5b2bd;
padding: 2px 0 2px 10px;
height: 25px;
width: 136px;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
}
.pwd {
margin-left: 2px;
margin-right: 2px;
}
.change {
border: 1px solid pink;
vertical-align: top;
}
button {
background-color: #0098c2;
color: white;
border: none;
height: 25px;
width: 67px;
}
</style>
3.JS部分:
<script>
var uname = document.querySelector('.uname');
var pwd = document.querySelector('.pwd');
uname.onfocus = function() {
if (this.value !== '手机/ID/邮箱') {
this.className = 'uname change';
this.style.color = '#b5b2bd';
} else {
this.value = '';
this.className = 'uname change';
}
}
uname.onblur = function() {
if (this.value === '') {
this.value = '手机/ID/邮箱';
this.className = 'uname';
} else {
this.className = 'uname';
this.style.color = 'black';
}
}
pwd.onfocus = function() {
if (this.value !== '密码') {
this.className = 'pwd change';
this.style.color = '#b5b2bd';
} else {
this.value = '';
this.className = 'pwd change';
this.type = 'password';
}
}
pwd.onblur = function() {
if (this.value === '') {
this.value = '密码';
this.className = 'pwd';
} else {
this.className = 'pwd';
this.type = 'password';
this.style.color = 'black';
}
}
</script>
4.遇到的问题:
(1)在点击文本框时会出现文本框下移的问题,这个折腾了好久,搜了一下才知道用“vertical-align”可以解决
(2)在点击文本框或者离开文本框时的字体颜色变化也要注意控制
(3)密码框显示“密码”两个字还是不太会弄,就自己瞎整了