簡單實(shí)現(xiàn)的JQuery文本框水印插件
采用JQuery實(shí)現(xiàn)文本框的水印效果非常容易,效果如下:

代碼片段,定義要應(yīng)用水印效果的文本框的樣式: .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: "站內(nèi)檢索",
className: "watermark",
});
});
</script>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jQuery中的bind綁定事件與文本框改變事件的臨時(shí)解決方法
- jquery關(guān)于頁面焦點(diǎn)的定位(文本框獲取焦點(diǎn)時(shí)改變樣式 )
- 基于jquery的設(shè)置頁面文本框 只能輸入數(shù)字的實(shí)現(xiàn)代碼
- JQuery獲取文本框中字符長度的代碼
- 在js(jquery)中獲得文本框焦點(diǎn)和失去焦點(diǎn)的方法
- jQuery文本框(input textare)事件綁定方法教程
- 使用Jquery實(shí)現(xiàn)點(diǎn)擊文字后變成文本框且可修改
- jquery設(shè)置text的值示例(設(shè)置文本框 DIV 表單值)
- 文本框水印提示效果的簡單實(shí)現(xiàn)代碼
- jQuery實(shí)現(xiàn)為控件添加水印文字效果(附源碼)
相關(guān)文章
JQuery自適應(yīng)IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
很高興,終于使用jquery實(shí)現(xiàn)了點(diǎn)擊外部鏈接,更改iframe內(nèi)容時(shí),iframe的高度自適應(yīng)問題。2011-03-03
基于jQuery實(shí)現(xiàn)的旋轉(zhuǎn)彩圈實(shí)例
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)的旋轉(zhuǎn)彩圈,涉及jQuery定時(shí)操作頁面元素的相關(guān)技巧,需要的朋友可以參考下2015-06-06
struts2+jquery組合驗(yàn)證注冊用戶是否存在
這篇文章主要介紹了使用struts2+jquery如何驗(yàn)證注冊用戶是否存在,需要的朋友可以參考下2014-04-04
實(shí)例代碼講解jquery easyui動態(tài)tab頁
這篇文章主要介紹了實(shí)例代碼講解jquery easyui動態(tài)tab頁的相關(guān)資料,需要的朋友可以參考下2015-11-11
基于jquery的劃詞搜索實(shí)現(xiàn)(備忘)
最近,需要做個(gè)劃詞搜索功能。在網(wǎng)上找了好些,最后,參照進(jìn)行修改,實(shí)現(xiàn)了想要的功能。這里,做個(gè)記錄,以備日后所用。2010-09-09
基于jquery和svg實(shí)現(xiàn)超炫酷的動畫特效
這篇文章主要介紹了基于jquery和svg實(shí)現(xiàn)超炫酷的動畫特效,想學(xué)習(xí)SVG的童鞋們可以來參考下。2014-12-12
JQuery組件基于Bootstrap的DropDownList(完整版)
這篇文章主要介紹了JQuery組件基于Bootstrap的DropDownList的完整版,在原有基礎(chǔ)上進(jìn)行完善功能,感興趣的小伙伴們可以參考一下2016-07-07
Jquery中使用show()與hide()方法動畫顯示和隱藏圖片
以前我們在js中如果要隱藏顯示一個(gè)元素我們需要利用display等于none來設(shè)置并且還沒有效果,現(xiàn)在在jquery中有了hide();我們可以利用hide()方法來操作,希望本文章給大家所有幫助。2015-10-10

