想要实现密码域灰色默认提示的功能，应该如何来实现呢？我最初的想法是这样的，就是利用jquery在密码域的上方覆盖一个div,div中显示的是灰色的提示文字“请输入密码”，想要达到的效果是，当点击密码域获得焦点的时候，div隐藏。当密码域失去焦点的时候首先判断密码域中是否输入了密码，如果没输入，那么div显示。如果输入了，div就继续隐藏，不知道这个想法是否有办法可以实现呢？那如果可以实现的话，应该用怎样的代码来实现呢？

想要实现上面所想要的效果，有两种方法，如下：
第一种方法的代码细节如下：
XML/HTML code:
<script type="text/javascript" src="http://www.coding123.net/js/jquery.js"></script>
<input type="password" id="pwd" />
<div id="dvPwd" style="display:none;position:absolute;color:#666">请输入密码！</div>
<script type="text/javascript">
$(function () {
var input = $('#pwd'), dv = $('#dvPwd');
dv.css({ width: input.outerWidth(), height: input.outerHeight(), top: input.offset().top, left: input.offset().left, display: 'block' }).click(function () { $(this).hide(); input.focus(); });
input.blur(function () { if (this.value == '') dv.show(); });
});
</script>

第二种可以实现的方法代码细节如下：
div在上面肯定不行，挡了输入框，如下是代码细节：
XML/HTML code:
<style type="text/css">
#pass_div{
position: relative;
height:18px;
}
#tip_div{
line-height: 18px;
font: 12px/18px "宋体";
color: #999;
padding-left:5px;
}
#pass_div input{
border: 1px solid #ddd;
background: none;
position: absolute;
height:15px;
width:100px;
top:0;
}
</style>
<div id="pass_div">
<div id="tip_div">请输入密码</div>
<input type="password" name="password">
</div>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("input[name='password']").focus(function(){
$("#tip_div").html("");
}).blur(function(){
if($(this).val()==""){
$("#tip_div").html("请输入密码");
}
});
});
</script>

其实，有些问题的解决方法不止有一种，只要自己可以适当的换位思考下，很多问题都可以很快的解决的。

此文由Web开发之答疑解惑源www.znjcx.com整理而来，若需转载，请注明原文出处：http://www.znjcx.com/html/y2012/4160_how.html，谢谢!