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事件也是完全可以做到。

  • 相关阅读:
    C#中的正则表达式(1)
    sql link
    Repeater控件绑定数据、分页、数据操作,最佳代码
    存储过程事物
    sql db link string
    存储过程返回值
    net打包
    excel c# 输出
    常用的js验证数字,电话号码,传真,邮箱,手机号码,邮编,日期
    sql 大全
  • 原文地址:https://www.cnblogs.com/jennieji/p/2748977.html
Copyright © 2011-2022 走看看