背景：各种登录网址账号密码输入框中的显示文字效果，当点击输入框时，显示的文字消失，当离开输入框后再次显示默认的文字
思路：采用 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>
*注 ：欢迎批评指正
