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>
| 歡迎光臨 資訊家電班NO7 (http://imce07.freehostia.com/forums/) | Powered by Discuz! 7.2 |