很多拥有用户的网站在登录的文本框和密码框都会有提醒文字，这样会提供更好的体验，比如新浪微博的登录。对于文本框的提示性信息很简单，就是给其加一个获取焦点和失去焦点的事件，分别在这两个事件发生的时候给一个提示性的文字和去掉这个文字。
做法是，给一个input元素加一个默认的value，就是你需要的提示性文字，分别给它加上获取焦点和失去焦点的时间，代码为：
Java代码：
<input name="loginEmail" id="loginEmail" type="text" class="ipt01" value="邮箱地址" onFocus="if(value==defaultValue){value=‘‘;this.style.color=‘#000‘}" onBlur="if(!value){value=defaultValue;this.style.color=‘#999‘}" style="color:#999999"/>
其中的样式表示这个文字的颜色，应该显示为灰色。
但是对于密码框，如果直接这样做是肯定不行的，因为它会把你的提示文字显示问星号，所以就有了其他办法，做法就是在页面加载的时候让密码输入的地方显示为一个文本框，然后当用户要输入密码隐藏这个文本框显示密码框，首先在页面密码输入出添加两个元素，一个为文本框一个为密码框，让密码框的显示属性为隐藏，代码为：
<input id="loginPwd_txt" type="text" value="请输入密码" class="ipt01" style="color:#999999"/> <input name="loginPwd" id="loginPwd" type="password" class="ipt01" style="display:none;" />
然后给这两个元素注册js事件，代码为：
var pwd = document.getElementById("loginPwd");
var pwd_text = document.getElementById("loginPwd_txt");
pwd_text.onfocus = function(){
pwd.style.display = "inline";
pwd_text.style.display = "none";
pwd.focus();
}
pwd.onblur=function(){
if(pwd.value==null || pwd.value=="" || pwd.value=="请输入密码"){
pwd.style.display="none";
pwd_text.style.display="inline";
}
}
这段js脚本应该在dom加载完成之后执行，jquery的话就是直接卸载$()之间
原文：http://www.cnblogs.com/sanxinglan/p/3530699.html