背景：各种登录网址账号密码输入框中的显示文字效果，当点击输入框时，显示的文字消失，当离开输入框后再次显示默认的文字
思路：采用 input 标签，给它设置 CSS 样式，这里本人将两个 input 标签放在同一行，并且希望两个 input 标签中间的间隙能够设置，想到了利用浮动 float 的知识，给第一个标签添加左浮动，同时要给父盒子的 font-size 设定为 0 ；给 input 设定的CSS样式属性添加一个 margin-right 的值。利用 JavaScript 的 DOM 事件知识，先获取元素，后注册事件（函数），利用 if 语句判断，点击 input 框（注册鼠标事件 onfocus）就显示 空字符串，并改变文本框的边框（border）颜色，原先的文本框颜色设置为 #999；边框轮廓默认值设置不存在 none ；当失去鼠标焦点 onblur 后，文本框显示默认文字，代码实现如下：
HTML 代码：
<body>
<div class="box">
<input type="text" value="邮箱/ID/手机号" style="float: left;" class="ipd">
<input type="text" value="密码" class="psw">
</div>CSS 样式：
<style>
.box {
font-size: 0;
}
input {
color: #999;
outline: none;
margin-right: 20px;
}
</style>JavaScript 部分：
<script>
var ipd = document.querySelector('.ipd');
var psw = document.querySelector('.psw');
ipd.onfocus = function () {
if (ipd.value === '邮箱/ID/手机号') {
ipd.value = '';
}
this.style.border = '1px solid pink';
}
ipd.onblur = function () {
if (this.value === '') {
this.value = '邮箱/ID/手机号';
}
this.style.border = '1px solid #999';
}
psw.onfocus = function () {
if (psw.value === '密码') {
psw.value = '';
}
this.type = 'password';
this.style.border = '1px solid pink';
}
psw.onblur = function () {
if (this.value === '') {
this.value = '密码';
}
this.type = 'text';
this.style.border = '1px solid #999';
}
</script>*注 ：欢迎批评指正