Saber 酱的抱枕

Fly me to the moon

08/18
2014
学习

input获得和失去焦点时文字改变的jq代码

 input jq jQuery js value 焦点 表单

input失去焦点和获得焦点jquery焦点事件插件,鼠标在搜索框中点击的时候里面的预设文字就消失了,在别的地方点击的话预设文字又出现了。

input需要设置id,然后在头部先引入jq,之后添加下面的js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//设置表单的预设value切换
jQuery.focusblur = function(focusid) {
    var focusblurid = $(focusid);
    var defval = focusblurid.val();//针对input
    var deftext = focusblurid.html();//针对textarea
    focusblurid.focus(function(){
        var thisval = $(this).val();
        if(thisval==defval){
            $(this).val("");
            $(this).html("");
            $(this).css("color","#333");
        }
    });
    focusblurid.blur(function(){
        var thisval = $(this).val();
        if(thisval==""){
            $(this).val(defval);
            $(this).html(deftext);
            $(this).css("color","#aaa");
        }
    });
};
//注册 一个一个写
$.focusblur("#yy_name");
$.focusblur("#yy_tel");    

两段color设置是我后来加的,第一个是点击之后,如果文字改变得和预设文字不同了,则把文字颜色加深,第二个则是失去焦点时如果没有任何文字了,则把文字重设为预设文字,颜色重设为指定的颜色。这样就ok了~

修改版:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
jQuery.focusblur = function(element,defcolor,truecolor) {
    var focusblurid = element;
    var defval = focusblurid.val();//针对input
    focusblurid.focus(function(){
        var thisval = $(this).val();
        if(thisval==defval){
            $(this).val("");
            $(this).css("color",truecolor);
        }
    });
    focusblurid.blur(function(){
        var thisval = $(this).val();
        if(thisval==""){
            $(this).val(defval);
            $(this).css("color",defcolor);
        }
    });
};
$.focusblur($(".jbdh").eq(0),"#b7b7b7","#444");

这个里面没有加html,需要的话再加吧

input获得和失去焦点时文字改变的jq代码

TOP
你就
    显示公告
    聊      天
    吃 零 食
    博客后台
    生存时间
    关闭春菜
    X
    召唤春菜