2011年12月20日 星期二

jQuery製作浮水印

之前有提過用jQuery外掛製作浮水印效果,不過其實用自己寫也不會很難,有時候外掛會太肥大,自己寫可以多少省一些資源。

首先準備一個input text的欄位。
<input type="text" id="input_filed" class="watermark" value="Message">
然後準備一個class="watermark"的樣式。
  1. .watermark{   
  2.     color:#CCCCCC;   
  3. }  
這個是來做浮水印樣式的。

然後輸入以下的code:
  1. $("#input_filed").focus(function(){   
  2.     //判斷欄位內的值是否為Message,是的話清空,並移除class=watermark   
  3.     if($(this).val()=="Message"){   
  4.         $(this).val("");   
  5.     }   
  6.     $(this).removeClass("watermark");   
  7. });   
  8. $("#input_filed").blur(function(){   
  9.     //如果欄位內為空,則填入預設message並增加watermark的樣式   
  10.     if($(this).val()==""){   
  11.         $(this).addClass("watermark");   
  12.         $(this).val("Message");   
  13.     }   
  14. });  
這樣就可以完成浮水印效果了。

不過浮水印在html5就變得很簡單了,只要加一個placeholder的attribute就可以了。
<input type="text" placeholder="Message">
這樣就變很簡單了,只不過在還沒全部轉換過去之前,還是要學一下複雜的方法。
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...