欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

簡(jiǎn)單實(shí)現(xiàn)的JQuery文本框水印插件

 更新時(shí)間：2016年06月14日 09:56:08   作者：Jaxu  
這篇文章主要為大家詳細(xì)介紹了簡(jiǎn)單實(shí)現(xiàn)JQuery文本框水印插件的相關(guān)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

接下來(lái)直接在頁(yè)面上使用： 

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • jquery控制頁(yè)面的展開和隱藏實(shí)現(xiàn)方法(推薦)

    jquery控制頁(yè)面的展開和隱藏實(shí)現(xiàn)方法(推薦)

    下面小編就為大家?guī)?lái)一篇jquery控制頁(yè)面的展開和隱藏實(shí)現(xiàn)方法(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-10-10
  • jquery.ui.draggable中文文檔(原文翻譯)

    jquery.ui.draggable中文文檔(原文翻譯)

    jquery.ui.draggable中文文檔(原文翻譯)。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
    2013-11-11
  • jquery隱藏標(biāo)簽和顯示標(biāo)簽的實(shí)例

    jquery隱藏標(biāo)簽和顯示標(biāo)簽的實(shí)例

    在jquery中我們要實(shí)現(xiàn)點(diǎn)擊按鈕隱藏標(biāo)簽和顯示標(biāo)簽，只要綁定指定button或其它，這樣點(diǎn)擊時(shí)調(diào)用hide或show函數(shù)即可解決，下面看個(gè)實(shí)例就明白了
    2013-11-11
  • jquery uploadify如何取消已上傳成功文件

    jquery uploadify如何取消已上傳成功文件

    這篇文章主要為大家詳細(xì)介紹了jquery uploadify如何取消已上傳成功文件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-02-02
  • 基于jQuery實(shí)現(xiàn)的仿百度首頁(yè)滑動(dòng)選項(xiàng)卡效果代碼

    基于jQuery實(shí)現(xiàn)的仿百度首頁(yè)滑動(dòng)選項(xiàng)卡效果代碼

    這篇文章主要介紹了基于jQuery實(shí)現(xiàn)的仿百度首頁(yè)滑動(dòng)選項(xiàng)卡效果代碼,涉及jQuery響應(yīng)鼠標(biāo)事件實(shí)現(xiàn)頁(yè)面元素動(dòng)態(tài)變換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-11-11
  • ajax在兼容模式下失效的快速解決方法

    ajax在兼容模式下失效的快速解決方法

    下面小編就為大家?guī)?lái)一篇ajax在兼容模式下失效的快速解決方法。小編覺(jué)得挺不錯(cuò)的?，F(xiàn)在分享給大家，給大家一個(gè)參考
    2016-03-03
  • jQuery中的bind綁定事件與文本框改變事件的臨時(shí)解決方法

    jQuery中的bind綁定事件與文本框改變事件的臨時(shí)解決方法

    暫時(shí)沒(méi)有想到什么好的解決辦法，我現(xiàn)在加了個(gè)瀏覽器判斷非ie的話就注冊(cè)blur事件，這樣有個(gè)問(wèn)題就是blur實(shí)在別的控件活動(dòng)焦點(diǎn)的時(shí)候，txtStation控件注冊(cè)的方法是為了填充它緊挨著的一個(gè)下拉列表
    2010-08-08
  • jQuery中delegate()方法用法實(shí)例

    jQuery中delegate()方法用法實(shí)例

    這篇文章主要介紹了jQuery中delegate()方法用法,實(shí)例分析了delegate()方法的功能、定義及為匹配元素的子元素添加一個(gè)或多個(gè)事件,并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行函數(shù)的使用技巧,需要的朋友可以參考下
    2015-01-01
  • 基于jQuery的樹控件實(shí)現(xiàn)代碼(asp.net+json)

    基于jQuery的樹控件實(shí)現(xiàn)代碼(asp.net+json)

    一個(gè)自己寫jQuery的樹控件,后臺(tái)用的是asp.net,其實(shí)只要服務(wù)器返回json就可以了
    2010-07-07
  • jquery實(shí)現(xiàn)的動(dòng)態(tài)回到頂部特效代碼

    jquery實(shí)現(xiàn)的動(dòng)態(tài)回到頂部特效代碼

    這篇文章主要介紹了jquery實(shí)現(xiàn)的動(dòng)態(tài)回到頂部特效代碼,涉及jQuery基于時(shí)間函數(shù)的定時(shí)遞歸調(diào)用實(shí)現(xiàn)帶緩沖效果的移動(dòng)功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-10-10

最新評(píng)論