jQuery-提示文本获取焦点的隐藏与显示

一、使用两种方式实现提示文本框获取焦点的显示与隐藏

相信大家都用过这样的提示框吧～

在不用思考兼容问题的时候，直接使用 placeholder 属性一下就搞定了。为了考虑低端的浏览器还得自己手动做 js ....

具体代码如下。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>提示文本的隐藏与显示</title>
        <style type="text/css">
        </style>
        
    </head>
    <body>
        <h2 id="h2-caption">提示文本的隐藏与显示</h2>
        <hr><br>
        <!-- ======================= 公用 div ===================== -->
        <div>
            <label>搜索框:</label>
            <input type="text" id="u-search" value="搜索..." title="搜索..." />
        </div>
        <script src="../js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function(){
                // 第一种实现方式,使用添加一个 title 与 value 相同的属性进行操作
                (function(){
                    
                    var $u_search = $(\'#u-search\');
                    
                    $u_search.focus(function(){
                        var txt_val = $(this).val();
                        if( txt_val == this.title ){
                            $(this).val("");
                        }
                    });
                    
                    $u_search.blur(function(){
                        var txt_val = $(this).val();
                        if( txt_val == "" ){
                            $(this).val( this.title );
                        }
                    });
                    
                    $u_search.trigger(\'blur\');
                })();

                // 第二种实现方式,使用 this.defaultValue 获取当前文本框的默认值
                (function(){
                    
                    var $u_search = $(\'#u-search\');
                    
                    $u_search.focus(function(){
                        var txt_val = $(this).val();
                        if( txt_val == this.defaultValue ){
                            $(this).val("");
                        }
                    });
                    
                    $u_search.blur(function(){
                        var txt_val = $(this).val();
                        if( txt_val == "" ){
                            $(this).val(this.defaultValue);
                        }
                    });
                })();
            });
        </script>
    </body>
</html>

总结：第一种方式主要是用一个 title 属性与之 value 相同，title 用来存储 value 的属性值，当然也可以使用其他的属性，如 data-* 之类的属性。

第二种方式当然是最简单的了。使用 this.defaultValue 来获取文本框的默认值。直接取值就可以了。