JQuery文本框水印插件的简单实现

采用JQuery实现文本框的水印效果非常容易,效果如下:

   代码片段,定义要应用水印效果的文本框的样式:

.watermark { color: #cccccc; }

  将JavaScript代码封装成JQuery的插件:

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);
JQuery文本框水印插件的简单实现

  接下来直接在页面上使用:

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>
JQuery文本框水印插件的简单实现

  原文地址:http://www.mkyong.com/jquery/jquery-watermark-effect-on-text-input/


本文转自Jaxu博客园博客,原文链接:http://www.cnblogs.com/jaxu/p/3599706.html,如需转载请自行联系原作者

上一篇:java基础学习_基础语法(上)01_day02总结


下一篇:asp.net 多个css文件内容自动放到一个文件中