JQuery文本框水印插件的簡單實現 - jaxu－IT工程師數位筆記本

文章出處

　　采用JQuery實現文本框的水印效果非常容易，效果如下：

　　代碼片段，定義要應用水印效果的文本框的樣式：

.watermark { color: #cccccc; }

　　將JavaScript代碼封裝成JQuery的插件：

(function ($) {
    $.fn.watermark = function (options) {
        var settings = $.extend({
            watermarkText: "Input something here",
            className: "watermark"
        }, options);

        return this.each(function () {
　　　　　　　if ($(this).val().length == 0 || $(this).val() == settings.watermarkText) {
            　　//init, set watermark text and class
            　　$(this).val(settings.watermarkText).addClass(settings.className);
　　　　　　  }

            //if blur and no value inside, set watermark text and class again.
            $(this).blur(function () {
                if ($(this).val().length == 0) {
                    $(this).val(settings.watermarkText).addClass(settings.className);
                }
            });

            //if focus and text is watermrk, set it to empty and remove the watermark class
            $(this).focus(function () {
                if ($(this).val() == settings.watermarkText) {
                    $(this).val('').removeClass(settings.className);
                }
            });
        });        
    }
})(jQuery);

　　接下來直接在頁面上使用：

<div class="search_box">
    <input id="tb_search" type="text" />
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#tb_search").watermark({
            watermarkText: "站內檢索",
            className: "watermark",
        });
    });
</script>