Home » jQuery 外掛

[jQ]jQuery AlphaNumeric 0.1.1

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

jquery_alphanumeric_0_1_1

在設計表單時，常常會希望某些欄位只能輸入英文或是數字，但使用者可不一定會乖乖的來輸入。所以就有像 jQuery AlphaNumeric 一樣的套件來讓我們能擋掉那些不允許輸入的字元。

套件名稱：jQuery AlphaNumeric
套件版本：0.1.1
作者網站：http://itgroup.com.ph/alphanumeric/
套件網址：http://plugins.jquery.com/project/aphanumeric
發佈日期：2007-08-28
檔案大小：1.49 KB
檔案下載：jquery.alphanumeric.js

參數說明：

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

allow(選填)
描述： 加入額外允許的字元
預設值： ""
 
ichars(選填)
描述： 加入額外拒絕輸入的字元
預設值： "!@#$%^&*()+=[]\\\';,/{}|\":<>?~`.- "
 
allcaps(選填)
描述： 只允許大寫的英文字元輸入；作者沒把它寫到預設設定中
預設值： 無
 
nocaps(選填)
描述： 只允許小寫的英文字元輸入；作者沒把它寫到預設設定中
預設值： 無
 
nchars(選填)
描述： 預設拒絕輸入的字元
預設值： ""

方法說明：

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

// 讓指定的元素所能輸入的值只允許英數字
$(selector).alphanumeric(p);
 
// 讓指定的元素所能輸入的值只允許英文
$(selector).alpha(p);
 
// 讓指定的元素所能輸入的值只允許數字
$(selector).numeric(p);

使用範例：

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

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.alphanumeric.js"></script>
<style type="text/css">
	.tb{
		border: 1px solid #ccc;
		padding: 5px;
		font-size: 12px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
	}
</style>
<script type="text/javascript">
	$(function(){
		// 只允許允許英數字
		$(".sample1").alphanumeric();
 
		// 除了允許允許英數字之外，還接受 . , 及空白
		$(".sample2").alphanumeric({
			allow:"., "
		});
 
		// 只允許允許小寫英文
		$(".sample3").alpha({
			nocaps:true
		});
 
		// 只允許允許數字
		$(".sample4").numeric();
 
		// 除了允許允許數字之外，還接受 .
		$(".sample5").numeric({
			allow:"."
		});
 
		// 自訂規則，除了 . 1 a 之外都能輸入
		$(".sample6").alphanumeric({
			ichars:'.1a'
		});
	});
</script>
 
<body>
	<h3>只允許允許英數字</h3>
	<input type="text" class="sample1 tb" />
 
	<h3>除了允許允許英數字之外，還接受 . , 及空白</h3>
	<input type="text" class="sample2 tb" />
 
	<h3>只允許允許小寫英文</h3>
	<input type="text" class="sample3 tb" />
 
	<h3>只允許允許數字</h3>
	<input type="text" class="sample4 tb" />
 
	<h3>除了允許允許數字之外，還接受 .</h3>
	<input type="text" class="sample5 tb" />
 
	<h3>自訂規則，除了 . 1 a 之外都能輸入</h3>
	<input type="text" class="sample6 tb" />
</body>
範例 1

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

6 筆針對 [jQ]jQuery AlphaNumeric 0.1.1 的迴響

      • 你好　我是想要實現在 Chrome 下 做到類似 IE CSS 下設定 ime-mode:disabled 的功能

        從輸入法限制只能英數
        就像輸入密碼攔位一樣

        但很可惜這在 Chrome
        用這頁的方法好像還是無法實現

        提到哪個欄位失效
        全都可以失效

        只要輸入法切換成新注音甚至是其他語言（例如：日文）
        就可以輸入規則外的字

        最後那欄有限制半形英文的

        只要先按鍵盤的 CapsLock
        之後新注音模式下按 Shift + a 就能輸入 小寫a 就突破限制了

        我猜測應該是 Chrome 沒有 ime-mode:disabled 也沒類似的原生功能

        所以對付 Chrome 要做輸入限制
        可能還要從鍵盤事件攔截印出來的字元單獨刪掉不允許的內容
        甚至最後還要再判斷一次整個 input=text 的 value 有沒有殘留不允許的數值

        只允許純英數的最理想就是像 IE 那樣從輸入法下手
        直接讓他只能在英數模式下
        但目前找不到 Chrome 環境下讓 JavaScript 去控制輸入法的寫法

        如果站長知道還請多多幫忙
        也許是我搜尋用的關鍵字不夠精準才一直找不到
        用 JavaScript 去控制輸入法

        也只是想拐個彎
        在 Chrome 環境下能個限制他的輸入法模式達到只限英數輸入

發表迴響