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

前端之家收集整理的这篇文章主要介绍了简单实现的JQuery文本框水印插件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

将JavaScript代码封装成JQuery的插件

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

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

Box">

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的jQuery相关文章