文本框的提示信息和密码框的提示信息

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

文本框的提示信息和密码框的提示信息

上一篇:前端页面集锦


下一篇:随意记事