Home » jQuery 外掛

[jQ]WaterMark 1.1

[ 日期： | 瀏覽：8,965 | 迴響：7 ]
範例 1
請協助我把這個效果加到我的網站 (只要 900 元)
沒錯!只要 900 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

watermark_1_0

一個體貼使用者的系統，通常都會在一些輸入框中加上貼心的提示，像 MSN 的搜尋框就有這樣的提示功能。基本常看到的做法都是先變更輸入框的 value 值為提示的內容，這樣的做法雖然簡單但最後表單要送出或是驗證時，都要先進行內容的過濾，畢竟總不可能把提示的內容往後端傳送吧！

這樣雖然能達到想要的提示效果，但總覺得不夠方便直覺，且變化度也不夠，因此筆者就想到改用類似浮水印的方式來達成同樣的功能。詳細的教學請參閱：浮水印式的輸入框提示

套件名稱：WaterMark
套件版本：1.1
作者網站：http://abgne.tw/jquery/jquery-plugins/watermark-1-0.html
套件網址：N/A
發佈日期：2010-11-24
檔案大小：1.84 KB
檔案下載：jquery.watermark.js

參數說明：

檢視原始碼 JavaScript
1
2
3
4
5
6
7

waterCss(選填)
描述： 浮水印所要套用的樣式 className
預設值： ''
 
useInputCss(選填)
描述： 是否再套用輸入框或文字框的 className
預設值： true

方法說明：

檢視原始碼 JavaScript
1
2
3
4
5

// 幫指定的輸入框或是文字框加上浮水印的提示效果
$(selector).waterMark(options);
 
// 修改預設的參數
$.waterMark.defaults = options;

使用範例：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.watermark.js"></script>
<style type="text/css">
	.c3 {
		color: blue;
	}
 
	div.c1 {
		color: #ccc;
		background-image: url(images/sprite.png);
		background-repeat: no-repeat;
		background-position: 134px -2038px;
	}
	div.c2 {
		color: red;
		background-image: url(images/sprite.png);
		background-repeat: no-repeat;
		background-position: 3px -2669px;
	}
	div.c3 {
		color: #ccc;
		background-color: #ff9;
	}
</style>
<script type="text/javascript">
	$(function(){
		$(":text, textarea").waterMark();
	});
</script>
 
<body>
	<input type="text" name="" title="搜尋聯絡人或網址..." class="c1" />
	<br />
	<input type="text" name="" title="" class="c2" />
	<br />
	<input type="text" name="" title="請輸入密碼" class="c3" />
	<br />
	<textarea name="" rows="5" cols="20" title="寫寫自己的喜好"></textarea>
</body>
範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

7 筆針對 [jQ]WaterMark 1.1 的迴響

  2. 你好，想請問

    我在做好的浮水印表單中key了文字，設了一個link到下一頁，但用瀏覽器功能按上一頁回去時

    就會發生提示效果與內容混合在一起

    請問有什麼辦法解決嗎？

發表迴響