本文介绍在Web开发中为密码输入框添加提示信息的两种实现方式。首先分析通过JavaScript动态切换文本框与密码框显示状态的方法，解决部分浏览器不支持动态修改input type属性的问题。随后介绍HTML5原生placeholder属性的简洁实现方案，并提供相关代码示例与工具推荐。
JavaScript实现密码框提示信息的方案
本文详细介绍在Web开发中为密码输入框添加提示信息的实现方案，供开发者参考。
近期需求要求在密码输入框中显示“请输入密码”的提示信息。起初考虑通过动态修改input元素的type属性来实现，但发现部分浏览器（如IE）中input的type属性为只读，无法动态更改。因此，采用其他替代方案，具体实现如下。
动态切换输入框显示状态
<input type="text" onfocus="changeTip(this);" id="passText" name="passText" value="请输入密码"/>
<input style="display: none;" type="password" onblur="changeTip(this);" id="pass" placeholder="" name="pass" value=""/>
<script type="text/javascript">
function changeTip(th){
var passText = document.getElementById('passText');
var pass = document.getElementById('pass');
if(th.id == 'pass'){
if(th.value == '' || th.value.length == 0 ){
passText.style.display='';
pass.style.display='none';
}
}else{
passText.style.display='none';
pass.style.display='';
pass.focus();
}
}
</script>
HTML5 placeholder属性简化实现
补充说明：
上述复杂的JavaScript实现逻辑，实际上可以通过HTML5提供的placeholder属性直接完成。具体代码示例如下。
代码示例：
<input type="password" id="pass5" placeholder="请输入密码" name="pass5" value=""/>此外，推荐一款实用的JavaScript压缩、格式化与加密工具，功能强大，特别适合需要代码加密的场景：
JavaScript压缩/格式化/加密工具：http://tools.jb51.net/code/jscompress
另外，上述工具中使用的加密方式基于eval函数。本站还提供了一款专门针对eval函数加密的解密工具，实用性强：
js的eval方法在线加密解密工具：http://tools.jb51.net/password/evalencode
希望本文内容对JavaScript程序设计有所帮助。