Home » jQuery 外掛

[jQ]WaterMark 1.1

範例 1
沒錯!只要 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 的迴響

  1. 你好,想請問

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

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

    請問有什麼辦法解決嗎?

發表迴響