【代码笔记】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" οnblur="changePwd(this);" />
<span style="white-space:pre">	</span><input type="text" id="pwdshow"  value="Password" οnfοcus="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;
}

效果图：