Home » jQuery 應用

[jQ]表單欄位透過滑鼠動作取得焦點

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

有網友來信問說，如何做出像在筆者 Blog 回應區域中的欄位會因瀏覽者滑鼠滑過而取得焦點，且取得焦點的輸入框會有不同的背景顏色來突顯。其實這樣的效果是很簡單的，只要使用基本的 mouseover() 及 focus() 事件就可以做到了。就讓筆者實做個範例給各位參考看看吧！

先準備一段簡單的 HTML 表單：

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

<body>
	<form id="block">
		<label>姓名:<input type="text" class="txt" /></label>
		<br />
		<label>信箱:<input type="text" class="txt" /></label>
		<br />
		<label>網站:<input type="text" class="txt" /></label>
		<br />
		<label>內容:<textarea class="txt"></textarea></label>
	</form>
</body>

接著就是準備好預設的 CSS 樣式及當取得要焦點時的設定：

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

.txt {
	margin-left: 20px;
	border: 1px solid #ccc;
}
.focus {
	background-color: #ff6;
}
.over {
	border: solid #f00;
}

在還沒開始動手寫程式之前的畫面就是一個很基本的表單

若沒問題的話，再來就是加上關鍵性的 jQuery 魔法囉：

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

$(function(){
	// 當滑鼠移到 #block .txt 上時, 讓它能自動取得焦點
	// 並且取得焦點時加上自訂的樣式
	$('#block .txt').focus(function(){
		// 當 .txt 取得焦點時
		// 加上自訂的 .focus 樣式
		$(this).addClass('focus');
	}).blur(function(){
		// 當 .txt 失去焦點時
		// 移除自訂的 .focus 樣式
		$(this).removeClass('focus');
	}).mouseover(function(){
		// 當滑鼠移到 .txt 上時
		// 讓 .txt 自動取得焦點
		$(this).focus();
	});
});

完成後的效果就是當滑鼠移到 .txt 上時會自動讓該元素取得焦點，同時咧~會再套用上自訂的 CSS 樣式：

雖然自動取得焦點是很方便的設計，不過有時也會帶來困擾。所以筆者在這邊另外提供另一種效果：當滑鼠移到輸入框時能自動套用樣式但不取得焦點

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

$(function(){
	// 當滑鼠移到 #block .txt 上時, 加上自訂的樣式
	$('#block .txt').hover(function(){
		$(this).addClass('over');
	}, function(){
		$(this).removeClass('over');
	});
});

這樣滑鼠移到輸入框時會有額外的突顯效果，但卻又不會強制取得焦點囉！

筆者的範例基本上都是用 jQuery 來寫的，不過有鑑於來信的網友是用一般的 JavaScript，所以就特別用 JavaScript 來做出一樣的效果：

檢視原始碼 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

window.onload = function(){
	// 當滑鼠移到輸入框時能自動取得焦點
	// 先取得 block1 中的全部元素
	var block1Elements1 = document.getElementById('block1').getElementsByTagName('*');
	for(var i=0;i<block1Elements1.length;i++){
		var _ele = block1Elements1[i],
				className = _ele.className;
		// 針對有 txt 樣式的元素來處理
		if(_className == 'txt'){
			// 當取得焦點時加上自訂樣式 focus
			_ele.onfocus = function(){
				this.className += ' focus';
			};
 
			// 當失去焦點時移除自訂樣式 focus
			_ele.onblur = function(){
				this.className = this.className.replace(' focus', '');
			};
 
			// 當滑鼠移入時取得焦點
			_ele.onmouseover = function(){
				this.focus();
			};
		}
	}
 
	// 當滑鼠移到輸入框時能自動套用樣式但不取得焦點
	// 先取得 block2 中的全部元素
	var block1Elements2 = document.getElementById('block2').getElementsByTagName('*');
	for(var i=0;i<block1Elements2.length;i++){
		var _ele = block1Elements2[i],
			_className = _ele.className;
		// 針對有 txt 樣式的元素來處理
		if(_className == 'txt'){
			// 當滑鼠移入時加上自訂樣式 over
			_ele.onmouseover = function(){
				this.className += ' over';
			};
 
			// 當滑鼠移出時移除自訂樣式 over
			_ele.onmouseout = function(){
				this.className = this.className.replace(' over', '');
			};
		}
	}
};

就看各位比較喜歡那種效果就只套用該部份的程式吧！

範例 1 範例 2 範例 3

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

1 筆針對 [jQ]表單欄位透過滑鼠動作取得焦點 的迴響

發表迴響