前端实现input标签输入框密码框显示文字效果

背景：各种登录网址账号密码输入框中的显示文字效果，当点击输入框时，显示的文字消失，当离开输入框后再次显示默认的文字

思路：采用 input 标签，给它设置 CSS 样式，这里本人将两个 input 标签放在同一行，并且希望两个 input 标签中间的间隙能够设置，想到了利用浮动 float 的知识，给第一个标签添加左浮动，同时要给父盒子的 font-size 设定为 0 ；给 input 设定的CSS样式属性添加一个 margin-right 的值。利用 JavaScript 的 DOM 事件知识，先获取元素，后注册事件（函数），利用 if 语句判断，点击 input 框（注册鼠标事件 onfocus）就显示 空字符串，并改变文本框的边框（border）颜色，原先的文本框颜色设置为 #999；边框轮廓默认值设置不存在 none ；当失去鼠标焦点 onblur 后，文本框显示默认文字，代码实现如下：

HTML 代码：

CSS 样式：

JavaScript 部分：

 *注 ：欢迎批评指正