【代码笔记】HTML+CSS+JavaScript实现密码输入框显示文字

原理：

通过设置一个input为password，默认display为none，再设置一个input为text设置为block，利用js脚本控制显隐。

具体思路：

给type类型为text的输入框加一个点击事件，点击事件是设置text类型输入框的display为none，设置password类型输入框为block，并获取焦点。

给type类型为password的输入框加一个失去焦点事件，失去焦点事件是先判断password是否为空。如果为空，就设置text类型输入框的display为block，设置password类型输入框为none；如果不为空，就结束方法。

具体实现代码：

JS文件：

function changePwd(obj) {
obj.style.display = "none";
if (obj.type == "text") {
document.getElementById('pwdtext').style.display = "block";
document.getElementById('pwdtext').focus();
} else {
if (obj.value == "")
document.getElementById('pwdshow').style.display = "block";
else {
obj.style.display = "block";
}
}
}

HTML/JSP文件：

<div class="pwd">
<input type="password" name="pwd" id="pwdtext" onblur="changePwd(this);" />
<span style="white-space:pre">	</span><input type="text" id="pwdshow"  value="Password" onfocus="changePwd(this);" />
</div>

CSS文件：

.pwd {
margin-top: 20px;
margin-left: 40px;
border: 1px solid #dcdcdc;
width: 348px;
height: 40px;
line-height: 40px;
}
.pwd input {
color: #dcdcdc;
width: 289px;
border: 0;
line-height: 40px;
float: left;
}
#pwdtext {
outline: none;
color: #000000;
display: none;
}

效果图：