簡單實現(xiàn)的JQuery文本框水印插件
更新時間:2016年06月14日 09:56:08 作者:Jaxu
這篇文章主要為大家詳細介紹了簡單實現(xiàn)JQuery文本框水印插件的相關代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下
采用JQuery實現(xiàn)文本框的水印效果非常容易,效果如下:

代碼片段,定義要應用水印效果的文本框的樣式: .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實現(xiàn)了點擊外部鏈接,更改iframe內容時,iframe的高度自適應問題。2011-03-03
實例代碼講解jquery easyui動態(tài)tab頁
這篇文章主要介紹了實例代碼講解jquery easyui動態(tài)tab頁的相關資料,需要的朋友可以參考下2015-11-11
JQuery組件基于Bootstrap的DropDownList(完整版)
這篇文章主要介紹了JQuery組件基于Bootstrap的DropDownList的完整版,在原有基礎上進行完善功能,感興趣的小伙伴們可以參考一下2016-07-07
Jquery中使用show()與hide()方法動畫顯示和隱藏圖片
以前我們在js中如果要隱藏顯示一個元素我們需要利用display等于none來設置并且還沒有效果,現(xiàn)在在jquery中有了hide();我們可以利用hide()方法來操作,希望本文章給大家所有幫助。2015-10-10

