本文介绍如何在密码输入框中显示提示语并解决IE8及以下浏览器的兼容性问题。由于IE8以下版本中input的type属性只读，无法动态切换，因此采用双输入框替换方案：默认显示文本框，聚焦时隐藏文本框并显示密码框，实现兼容的提示效果。
JavaScript实现输入框(密码框)出现提示语
有时在登录表单中需要添加提示语，例如“请输入用户名”或“请输入密码”。对于用户名输入框，直接显示提示语没有问题；但在密码输入框中，若直接显示“请输入密码”，由于密码框默认以掩码形式显示内容，会导致提示语不可见。若尝试通过动态修改input元素的type属性来实现切换，则会遇到兼容性问题：在IE8及更低版本的浏览器中，已存在于页面中的input元素的type属性是只读的，无法通过脚本修改。因此，需要采用其他实现方式，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.jb51.net/" />
<title>本站</title>
<style type="text/css">
#tx{
width:100px;
}
#pwd{
display:none;
width:100px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var tx=document.getElementById("tx");
var pwd=document.getElementById("pwd");
tx.onfocus=function(){
if(this.value!="密码")
return;
this.style.display="none";
pwd.style.display="block";
pwd.value="";
pwd.focus();
}
pwd.onblur=function(){
if(this.value!=""){
return;
}
this.style.display="none";
tx.style.display="";
tx.value="密码";
}
}
</script>
</head>
<body>
<input type="text" value="密码" id="tx"/>
<input type="password" id="pwd" />
</body>
</html> 上述代码实现了预期功能：在默认状态下显示明文提示语，当用户输入密码时，则以密码掩码形式显示。
该实现原理较为简单：默认情况下，使用type为“text”的文本框显示提示语；当用户点击（聚焦）该文本框时，将文本框隐藏，同时显示type为“password”的密码框，从而实现视觉上的替换效果。