改善交互体验-巧用底图+JS做搜索框动态效果

本文关键字:搜索框 js改变文字代码与效果分离

做前台的亲们也许经常用到这个东西,即使您不是做前台的同学,想必在浏览网页的时候也经常碰到某些网站有诸如此类的搜索框.

我们点击它,提示性文字消失,如图然后离开它,文字再现.或者当我们没有输入任何内容的时候,依然返回提示性文字.

诸如此类的需求,可以说已经非常古老,网上案例也是一搜一大堆.但尽管如此,我们也能从中发现,这些所谓的实现可谓非常简单,就是利用JS判断输入框然后决定是否将文字替换.

例如:

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

这确实能直观地解决基本的问题,但更多的问题有待解决:

1.当提示性文字要求更换颜色,或者干脆用艺术字体,区别于客户输入的文字样式.

2.某次变更界面时,需要将文字改变内容,例如换成"请输入您的关键字",而作为美工而言,对编译好的JS没有任何操作权限.即便可以更改,因为界面少量内容的改动,牵扯到JS的修改也是非常费时费力.

3.您的网站有不止一个这样的搜索框,它们的内容大致有"请输入关键字","关键字","搜索内容"......如果再去更改JS,将非常可能导致出错.

我也是曾经深陷这个怪圈很久,某一天突然看到这个不起眼的放大镜底图,让我眼前顿时一亮,能否将这个底图发扬一下光辉,也好让页面JS程序和界面彻底分离一下?

css样式中有关backgroud-position的章节对此UI们应该不会陌生.我的思路是放大镜图片稍微扩大一下,然后根据用户行为去改变它的position就可以了.

更改之后的放大镜底图如下:

从此它有两种状态了,在JS中根据用户行为去改变它的position.

主要代码如下:

<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>