很多拥有用户的网站在登录的文本框和密码框都会有提醒文字,这样会提供更好的体验,比如新浪微博的登录。对于文本框的提示性信息很简单,就是给其加一个获取焦点和失去焦点的事件,分别在这两个事件发生的时候给一个提示性的文字和去掉这个文字。
做法是,给一个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的话就是直接卸载$()之间