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

来源：互联网发布：汉字笔顺查询软件编辑：程序博客网时间：2024/06/07 23:11

原理：

通过设置一个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;}

效果图：

0 0