Home » jQuery 外掛

[jQ]Masked Input 1.2.2

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

masked_input_1_2_2

Masked Input 套件可以讓開發者很方便的設定指定輸入框的輸入格式，例如電話、分機或是日期格式。

套件名稱：Masked Input
套件版本：1.2.2
作者網站：http://digitalbush.com/projects/masked-input-plugin/
套件網址：http://plugins.jquery.com/project/maskedinput
發佈日期：2009-03-09
檔案大小：7.01 KB
檔案下載：jquery.maskedinput-1.2.2.js

參數說明：

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

parameter(必填)
描述： 遮罩的規則
預設值： 無
 
settings(選填)
描述： 設定自訂的 placeholder 屬性或 completed 事件
預設值： {	placeholder: "_",	completed: null }
 
placeholder(選填)
描述： 替換遮罩的內容
預設值： "_"
 
completed(選填)
描述： 當輸入的值符合遮罩後觸發的事件
預設值： null

方法說明：

檢視原始碼 JavaScript
1
2
3
4
5

// 幫輸入框加上指定的遮罩規則
$(selector).mask(mask, settings);
 
// 自訂新的遮罩符號
$.mask.definitions[char] = string;

使用範例：

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

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.maskedinput-1.2.2.js"></script>
<script type="text/javascript">
	$(function(){
		// 新增 ~ 符號來表示 +-
		$.mask.definitions['~']='[+-]';
 
		$('#date').mask('99/99/9999');
		$('#phone').mask('(99) 999-9999');
		$('#phoneext').mask("(99) 999-9999? #999");
		$("#tin").mask("99-9999999");
		$("#ssn").mask("999-99-9999");
		// 自訂遮罩並使用半形空白來替換遮罩字元
		// 並加上 completed 事件
		$("#product").mask("a*-999-a999", {
			placeholder: " ",
			completed: function(){
				alert("您輸入的值是: " + this.val());
			}
		});
		$("#eyescript").mask("~9.99 ~9.99 999");
	});
</script>
 
<body>
	<label for="date">日期:<input id="date" type="text" />99/99/9999</label><br />
	<label for="phone">電話:<input id="phone" type="text" />(99) 999-9999</label><br />
	<label for="phoneext">電話 + 分機:<input id="phoneext" type="text" />(99) 999-9999? #999</label><br />
	<label for="ssn">SSN:<input id="ssn" type="text" />999-99-9999</label><br />
	<label for="product">產品序號:<input id="product" type="text" />a*-999-a999</label><br />
	<label for="eyescript">Eye Script:<input id="eyescript" type="text" />~9.99 ~9.99 999</label><br />
</body>
範例 1

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

2 筆針對 [jQ]Masked Input 1.2.2 的迴響

發表迴響