简单实现的JQuery文本框水印插件
更新时间:2016年06月14日 09:56:08 作者:Jaxu
这篇文章主要为大家详细介绍了简单实现JQuery文本框水印插件的相关代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
采用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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
很高兴,终于使用jquery实现了点击外部链接,更改iframe内容时,iframe的高度自适应问题。2011-03-03
JQuery组件基于Bootstrap的DropDownList(完整版)
这篇文章主要介绍了JQuery组件基于Bootstrap的DropDownList的完整版,在原有基础上进行完善功能,感兴趣的小伙伴们可以参考一下2016-07-07
Jquery中使用show()与hide()方法动画显示和隐藏图片
以前我们在js中如果要隐藏显示一个元素我们需要利用display等于none来设置并且还没有效果,现在在jquery中有了hide();我们可以利用hide()方法来操作,希望本文章给大家所有帮助。2015-10-10


最新评论