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