Home » jQuery 外掛

[jQ]jQuery Maxlength plugin 1.0.5

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

jquery_maxlength_plugin_1_0_5

jQuery Maxlength plugin 套件能讓指定的輸入框產生輸入長度限制的功能，且還提供搭配貼心的提示訊息來讓使用者能了解發生什麼事。

套件名稱：jQuery Maxlength plugin
套件版本：1.0.5
作者網站：http://www.anon-design.se/demo/maxlength-jquery
套件網址：http://plugins.jquery.com/project/CustomMaxlength
發佈日期：2009-05-16
檔案大小：3.56 KB
檔案下載：jquery.maxlength.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
32
33
34
35

events(選填)
描述： 要觸發的事件
預設值： []
 
maxCharacters(選填)
描述： 最大的輸入長度
預設值： 10
 
status(選填)
描述： 是否顯示訊息狀態列
預設值： true
 
statusClass(選填)
描述： 訊息狀態列所套用的樣式 class
預設值： "status"
 
statusText(選填)
描述： 訊息狀態列的後綴文字
預設值： "character left"
 
notificationClass(選填)
描述： 當達到最大輸入長度時，指定元素所套用的樣式 class
預設值： "notification"
 
showAlert(選填)
描述： 當達到最大輸入長度時是否使用 alert() 方式來提醒
預設值： false
 
alertText(選填)
描述： 當達到最大輸入長度時且使用 alert() 方式來提醒時的內容
預設值： "You have typed too many characters."
 
slider(選填)
描述： 訊息狀態列的顯示方式是否使用滑出入的方式
預設值： false

方法說明：

檢視原始碼 JavaScript
1
2

// 讓指定的元素能在輸入時有限制長度的功能
$(selector).maxlength(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

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.maxlength.js"></script>
<style type="text/css">
	/* jQuery Maxlength plugin 需要的 class */
	.notification {
		border:3px solid #d55b5b;
		background-color: #ffcdcd;
		padding:5px;
	}
	.smaple1 {
		width: 300px;
	}
</style>
<script type="text/javascript">
	$(function(){
		// 讓 #textarea_1_1 及 #input_1_1 能限制輸入長度
		// 長度最多 20 字, 訊息狀態部份採用滑出入方式
		$("#textarea_1_1, #input_1_1").maxlength({
			maxCharacters: 20,
			slider: true
		});
	});
</script>
 
<body>
	<div class="smaple1">
		<textarea cols="50" rows="5" name="textarea_1_1" id="textarea_1_1"></textarea>
		<input type="text" name="input_1_1" id="input_1_1" />
	</div>
</body>
範例 1

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

發表迴響