zoukankan      html  css  js  c++  java
  • 文本框的提示信息和密码框的提示信息

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

  • 相关阅读:
    java中a++和++a的区别详解
    Oracle 对比两张表不一样 的数据
    通配符的匹配很全面, 但无法找到元素 'tx:annotation-driven' 的声明
    Java语言基础-运算符
    java中+=详解 a+=b和a=a+b的区别
    java语言基础-变量
    java语言基础-进制
    Spring整合CXF发布及调用WebService
    Oracle Job定时任务的使用详解
    MySQL的主从配置
  • 原文地址:https://www.cnblogs.com/sanxinglan/p/3530699.html
Copyright © 2011-2022 走看看