Home » jQuery 應用

[jQ]浮水印式的輸入框提示

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

一個體貼使用者的系統，通常都會在一些輸入框中加上貼心的提示，像 MSN 的搜尋框就有這樣的提示功能

watermark_1

基本常看到的做法都是先變更輸入框的 value 值為提示的內容，這樣的做法雖然簡單但最後表單要送出或是驗證時，都要先進行內容的過濾，畢竟總不可能把提示的內容往後端傳送吧！

這樣雖然能達到想要的提示效果，但總覺得不夠方便直覺，且變化度也不夠，因此筆者就想到改用類似浮水印的方式來達成同樣的功能。所謂的浮水印就是在原本的畫面上再加上一層..."膜"，讓我們來看圖示說明：

watermark_2

由上圖中可以看到外層有一個要用來提示用的區塊，筆者要透過程式來把提示區塊移動到輸入框的上方，讓兩者疊在一起，偽裝成提示區塊跟輸入框是一體的感覺。因為提示區塊本身是一個 Div 來做成的，所以內容要放文字或是圖片都可以，這樣的提示效果就會比單調的文字更能讓使用者了解。

我們的 HTML 其實不用什麼特別的設定，只要一般的輸入框就可以了

檢視原始碼 HTML
1
2
3
4
5
6
7
8
9

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

有些輸入框我有加入自訂的 CSS 效果，然後筆者也想藉由同樣的 className 來自訂不同的提示樣式，所以在 CSS 中有做一點變化

檢視原始碼 CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.c3 {
	color: blue;
}
 
div.c1 {
	color: #ccc;
	background-image: url(sprite.png);
	background-repeat: no-repeat;
	background-position: 134px -2038px;
}
div.c2 {
	color: red;
	background-image: url(sprite.png);
	background-repeat: no-repeat;
	background-position: 3px -2669px;
}
div.c3 {
	color: #ccc;
	background-color: #ff9;
}

假設原本輸入框的 className 是 .c1，那麼在寫 CSS 時，筆者除了 .c1 之外還會多寫一個 div.c1 來讓自訂的提示區塊使用。

接著就是加上讓我們用 jQuery 來完成浮水印的提示區塊

檢視原始碼 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
40
41
42
43
44
45
46
47
48
49
50
51

$(function(){
	// 取得要加上提示的元素並一一設定
	$(":text, textarea").each(function(i, ele){
		// 先把目前元素轉換成 jQuery 物件後記錄起來
		// 再取得 title 及 className 屬性值
		var _text = $(ele),
			_title = _text.attr("title"),
			_class = _text.attr("className") || "";
 
		// 如果有 title 或是 className 值的話，則進行改造
		if(!!_title || !!_class){
			// 在 body 中插入一個空白的 Div 區塊來當提示區塊
			var _water = $("<div></div>").appendTo("body");
			// 設定提示區塊的 css 屬性(基本是讓它跟輸入框一樣)
			// position 一定要設成 absolute 才能移來移去
			_water.css({
				position: "absolute",
				width: _text.width(),
				height: _text.height(),
				fontSize: _text.css("fontSize"),
				lineHeight: _text.css("lineHeight"),
				top: _text.position().top + parseInt(_text.css("borderTopWidth"), 10) + "px",
				left: _text.position().left + parseInt(_text.css("borderLeftWidth"), 10) + "px",
				paddingTop: _text.css("paddingTop"),
				paddingBottom: _text.css("paddingBottom"),
				paddingLeft: _text.css("paddingLeft"),
				paddingRight: _text.css("paddingRight"),
				marginTop: _text.css("marginTop"),
				marginBottom: _text.css("marginBottom"),
				marginLeft: _text.css("marginLeft"),
				marginRight: _text.css("marginRight"),
				cursor: "text",
				overflow: "hidden"
			// 把提示區塊的內容設成輸入框的 title 值
			}).html(_title).click(function(){
				// 當提示區塊被點擊時，觸發輸入框的 focus 事件
				_text.trigger("focus");
			// 最後加上額外的 className
			}).addClass(_class);
 
			// 設定輸入框的 focus 及 blur 事件
			_text.focus(function(){
				// 隱藏提示區塊
				_water.hide();
			}).blur(function(){
				// 如果輸入框中沒有值則再顯示提示區塊
				if(this.value=="") _water.show();
			});
		}
	});
});

筆者為了讓提示區塊跟輸入框能更像一體的感覺，所以就盡量的讓提示區塊的 CSS 能跟輸入框的一模一樣，所以連同 cursor 也要變成 text 的型態才行唷！

最後讓我們來看看效果：

watermark

嘿~是不是變的更有效果了呢，這樣的提示我想會讓使用者更直覺的！

範例 1

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

9 筆針對 [jQ]浮水印式的輸入框提示 的迴響

    • 它這不是輸入方塊哩~主要是用 div 或是 ul li 等方式來產生這樣的畫面的。改天有時間再弄個簡單的範例好了~!

  3. 男丁大大:
    我的表格有把它拉到網頁中間，但是提示字眼沒有跟著動
    如果要讓他跟著所提示的textbox移動要如何設定呢?

  4. 男丁大大，
    我把您的範例放到包有兩層masterpage底下時，會出現找不到 position() 屬性或方法的錯誤吶(應該是找不到"_text.position()")，若只在一層的masterpage裡就可正常執行。請問我可以如何修正?謝謝。
    註：我的jquery放在最上層的masterpage裡面，textbox 也是在最上層的masterpage裡。

發表迴響