jQuery製作浮水印

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

首先準備一個input text的欄位。
<input type="text" id="input_filed" class="watermark" value="Message">
然後準備一個class="watermark"的樣式。

view plaincopy to clipboardprint?

1. .watermark{   
2.     color:#CCCCCC;   
3. }  

這個是來做浮水印樣式的。

然後輸入以下的code：

view plaincopy to clipboardprint?

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">
這樣就變很簡單了，只不過在還沒全部轉換過去之前，還是要學一下複雜的方法。