|
 
- 積分
- 7435
- 經驗值
- 7929 EXP
- 家電幣
- 673822 法拉
- H值
- 8384 汁
- 熱血
- 6000 度
- 嘴砲
- 3266 值
         
|
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
參數說明：
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
方法說明：
// 幫指定的輸入框欄位加上 Autotab 功能
$(selector).autotab(options);
使用範例：
<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> |
|
