Home » jQuery 外掛

[jQ]Autotab 1.1b

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

autotab_1_1b

Autotab 套件可以讓指定的輸入框滿足輸入長度後自動跳到下一個指定的欄位，或者是當欄位值刪除清空後，還能跳到上一個欄位，整個效果很類似我們在輸入 IP 一樣。除了自動切換欄位之外，還提供了欄位的輸入條件限制等功能！

套件名稱：Autotab
套件版本：1.1b
作者網站：http://www.lousyllama.com/sandbox/jquery-autotab
套件網址：http://plugins.jquery.com/project/autotab
發佈日期：2008-09-19
檔案大小：6.82 KB
檔案下載：jquery.autotab.js

參數說明：

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

format(選填)
描述： 設定可接受的輸入值的型態；text(非數字)、alpha(英文)、numeric(數字)、number(數字)、alphanumeric(英文+數字)、custom(自訂) 及 all(預設)
預設值： 'all'
 
maxlength(選填)
描述： 可接受值的最大長度，程式會自動取本身的 maxlength 屬性
預設值： 2147483647
 
uppercase(選填)
描述： 輸入後的值轉大寫
預設值： false
 
lowercase(選填)
描述： 輸入後的值轉小寫
預設值： false
 
nospace(選填)
描述： 移除輸入值中的空白
預設值： false
 
target(選填)
描述： 當滿足欄位輸入長度後，要自動跳往的下一個欄位
預設值： null
 
previous(選填)
描述： 當欄位值被刪除到 0 時，若繼續刪除的話，則會要自動跳往的上一個欄位
預設值： null
 
pattern(選填)
描述： 自訂的過濾篩選條件
預設值： null

方法說明：

檢視原始碼 JavaScript
1
2

// 幫指定的輸入框欄位加上 Autotab 功能
$(selector).autotab(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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autotab.js"></script>
<script type="text/javascript">
	$(function(){
		// 手機號碼
		$('#number_code').autotab({
			target: 'number1', 
			format: 'numeric'
		});
		$('#number1').autotab({
			target: 'number2',
			format: 'numeric', 
			previous: 'number_code'
		});
		$('#number2').autotab({
			target: 'text1',
			previous: 'number1',
			format: 'numeric'
		});
 
		// 只允許非數字(英文+符號)
		$('#text1').autotab({
			target: 'text2',
			previous: 'number2',
			format: 'text'
		});
		$('#text2').autotab({
			target: 'text3',
			format: 'text',
			previous: 'text1'
		});
		$('#text3').autotab({
			target: 'alpha1',
			format: 'text',
			previous: 'text2'
		});
 
		// 只允許英文
		$('#alpha1').autotab({
			target: 'alpha2',
			format: 'alpha',
			previous: 'text3'
		});
		$('#alpha2').autotab({
			target: 'alpha3',
			format: 'alpha',
			previous: 'alpha1'
		});
		$('#alpha3').autotab({
			target: 'alpha4',
			format: 'alpha',
			previous: 'alpha2'
		});
		$('#alpha4').autotab({
			target: 'alpha5',
			format: 'alpha',
			previous: 'alpha3'
		});
		$('#alpha5').autotab({
			target: 'alphanumeric1',
			previous: 'alpha4',
			format: 'alpha'
		});
 
		// 允許數字與英文(英文會自動轉大小)
		$('#alphanumeric1').autotab({
			target: 'alphanumeric2',
			format: 'alphanumeric',
			uppercase: true,
			previous: 'alpha5'
		});
		$('#alphanumeric2').autotab({
			target: 'alphanumeric3',
			format: 'alphanumeric',
			uppercase: true,
			previous: 'alphanumeric1'
		});
		$('#alphanumeric3').autotab({
			target: 'alphanumeric4',
			format: 'alphanumeric',
			uppercase: true,
			previous: 'alphanumeric2'
		});
		$('#alphanumeric4').autotab({
			target: 'alphanumeric5',
			format: 'alphanumeric',
			uppercase: true,
			previous: 'alphanumeric3'
		});
		$('#alphanumeric5').autotab({
			previous: 'alphanumeric4',
			format: 'alphanumeric',
			uppercase: true
		});
	});
</script>
 
<body>
	<div><strong>手機號碼:</strong></div>
	<input type="text" name="number_code" id="number_code" maxlength="4" size="4" /> -
	<input type="text" name="number1" id="number1" maxlength="3" size="3" /> -
	<input type="text" name="number2" id="number2" maxlength="3" size="3" />
 
	<div><strong>只允許非數字(英文+符號):</strong></div>
	<input type="text" name="text1" id="text1" maxlength="5" size="4" /> -
	<input type="text" name="text2" id="text2" maxlength="4" size="4" /> -
	<input type="text" name="text3" id="text3" maxlength="5" size="4" />
 
	<div><strong>只允許英文:</strong></div>
	<input type="text" name="alpha1" id="alpha1" maxlength="5" size="4" /> -
	<input type="text" name="alpha2" id="alpha2" maxlength="5" size="4" /> -
	<input type="text" name="alpha3" id="alpha3" maxlength="5" size="4" /> -
	<input type="text" name="alpha4" id="alpha4" maxlength="5" size="4" /> -
	<input type="text" name="alpha5" id="alpha5" maxlength="5" size="4" />
 
	<div><strong>允許數字與英文(英文會自動轉大小):</strong></div>
	<input type="text" name="alphanumeric1" id="alphanumeric1" maxlength="5" size="4" /> -
	<input type="text" name="alphanumeric2" id="alphanumeric2" maxlength="5" size="4" /> -
	<input type="text" name="alphanumeric3" id="alphanumeric3" maxlength="5" size="4" /> -
	<input type="text" name="alphanumeric4" id="alphanumeric4" maxlength="5" size="4" /> -
	<input type="text" name="alphanumeric5" id="alphanumeric5" maxlength="5" size="4" />
</body>
範例 1

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

2 筆針對 [jQ]Autotab 1.1b 的迴響

發表迴響