jQuery表单Input文本框默认说明文字获得焦点后消失效果

秒速五厘米 2021-11-10 22:06 268阅读 0赞

## 法一： ##

加入以下jQuery代码

*改良版：*（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。

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

接着，用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哦！

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

转载于:https://www.cnblogs.com/jennieji/archive/2012/01/31/2748977.html