JS实现搜索框动态效果

实现搜索框以下效果：

点击它提示性文字消失，然后离开它,文字再现。

1、一般的做法：

<script>
$("#tbxKeyword").focus(function(){
     if($("#tbxKeyword").val() == "请输入关键字"){
　　    $("#tbxKeyword").val("");
    }
});
 
$("#tbxKeyword").blur(function(){
    if($("#tbxKeyword").val() == ""){
　　    $("#tbxKeyword").val("请输入关键字");
    }
});
</script>

2、巧用底图（推荐）

在JS中根据用户行为去改变的position（通过css样式中的backgroud-position属性），

这样做方便美工和修改，而且不用改动JS代码。

主要代码如下：

<script type="text/javascript">
function chkCss(){ 
    $("input[rel='search']").each(function(){
                                              setCss($(this));
                                              $(this).focus(function(){
                                                  clearCss($(this));
                                              });
                                              $(this).blur(function(){
                                                  setCss($(this));
                                              });
    });
}
  
function setCss(obj){
            if(obj.val() != "") clearCss(obj);
            else fillCss(obj);
}
function clearCss(obj){
        obj.css("background-position","0px -35px");
}
function fillCss(obj){
        obj.css("background-position","0px -5px");
}
setTimeout(function(){chkCss();},100);
</script>

原文地址： http://www.cnblogs.com/CoreCaiNiao/archive/2013/02/17/2914285.html