zoukankan      html  css  js  c++  java
  • jQuery表单Input文本框默认说明文字获得焦点后消失效果

    法一:

    加入以下jQuery代码

    var txt=[];
    var textbox=$('input:text');
    textbox.each(function(){
    txt.push($(this).val());
    });
    textbox.focus(function(){
    $(this).val("");
    });
    textbox.blur(function(){
    if($(this).val()== ""){
    var recover=txt[textbox.index($(this))];
    $(this).val(recover);
    }}); 

    改良版:(2012-2-24添加)

    $('input:text').each(function(){
    var txt = $(this).val();
    $(this).focus(function(){
    if(txt === $(this).val()) $(this).val("");
    }).blur(function(){
    if($(this).val() == "") $(this).val(txt);
    });
    })


    法二:

    首先,给你的每个表单项(Input, Textarea, Select ...按钮可除外)外套一个元素。

    注意保持这个元素名相同。建议使用ul, li。

    <form name="form1" id="form1" method="post">
    <ul>
    <li><input type="text" name="username" id="username"/></li>
    <li><input type="text" name="password" id="password"/></li>
    </ul>
    <input type="submit" value="提交"/>
    </form>

    然后,在表单元素左右(同一个标签内)插入一个LABEL标签,输入提示文字信息。

    <form name="form1" id="form1" method="post">
    <ul>
    <li>
    <input type="text" name="username" id="username"/>
    <label for="username">用户名</label>
    </li>
    <li>
    <input type="text" name="password" id="password"/>
    <label for="password">密码</label>
    </li>
    </ul>
    <input type="submit" value="提交"/>
    </form>

    接着,用CSS给LABEL绝对定位到INPUT的上方,并为之加上:focus伪类,用LEFT值控制LABEL的显示。

    --参考CSS代码:

    #form1 UL LI
    {
    position:relative;
    padding:0em 0px 0em 0px;  /*去掉li默认空白边*/
    }
    #form1 UL LI LABEL
    {
    position:absolute;
    top:0px;
    left:0px;
    }
    #form1 UL LI INPUT:focus + LABEL
    {
    left:-9999px; 	/*给LABEL赋一个很大的LEFT值,使之从你视野消失,display:none;也可以*/
    }

    然后,加一条CSS,控制表单项内容不为空时LABEL不显示。

    #form1 UL LI .notempty + LABEL
    {
    left:-9999px;
    }

    最后,用jQuery判断表单元素失焦时内容是否为空。为空则为该元素加上上面添加的class名称即可。当然不要忘了,如果内容被用户清空时要去掉这个class哦!

    var form = $('#form1');
    form.delegate('INPUT',"change",function(){
    if($(this).val()!==""){
    if(!$(this).hasClass("notempty")) $(this).addClass("notempty");
    }
    else{$(this).removeClass("notempty")}
    });

    此处我使用了change事件,当然blur事件也是完全可以做到。

  • 相关阅读:
    【Docker】-NO.131.Docker.1 -【Docker】
    【HBase】-NO.140.HBase.1 -【HBase】
    【Vagrant】-NO.130.Vagrant.1 -【Vagrant】
    【技巧】-NO.123.数据处理技巧
    【Common】-NO.122.common.1
    【心得】-NO.114.面试.1 -【To HR And Interviewer】
    【JVM】-NO.113.JVM.1 -【JDK11 HashMap详解-4-resize()】
    【JVM】-NO.114.JVM.1 -【JDK11 HashMap详解-3-put-treeifyBin()-AVL】
    【JVM】-NO.115.JVM.1 -【JDK11 HashMap详解-4-伸展树、B树】
    【JVM】-NO.116.JVM.1 -【JDK11 HashMap详解-5-红黑树】
  • 原文地址:https://www.cnblogs.com/jennieji/p/2748977.html
Copyright © 2011-2022 走看看