JQuery实现文本框水印插件

JQuery实现文本框水印插件
 
HTML代码:
 
<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>
 
将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);
 
Css代码:
 
.watermark { color: #cccccc; }

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64682.shtml

张贴在3