jquery表單插件Autotab使用方法詳解
更新時間：2016年06月24日 11:45:46 投稿：lijiao
這篇文章主要為大家詳細介紹了jquery表單插件Autotab使用方法，Autotab自動Tab文本框，感興趣的小伙伴們可以參考一下
Autotab也是一款功能專一的表單插件，它提供了自動跳格的功能，當用戶輸入的字符數(shù)一旦超過已定義的最大長度，則會根據(jù)事先設(shè)置的目標自動跳轉(zhuǎn)到相應(yīng)元素上，省卻了
用戶按【Tab】鍵的麻煩。最典型的應(yīng)用就是輸入IP地址、軟件激活碼等地方了，我們做的web項目中也有很多地方可以用到這插件，對于提高用戶體驗還是很有幫助的。
使用時需要引入jquery.autotab.js,下載地址：點擊進入下載頁面
<html>
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script src="jquery.autotab.js" type="text/javascript"></script>
<script type="text/javascript">
//頁面加載方法
$(function(){
$('#autotab').submit(function(){
return false;
})
$('#autotab :input').autotab_magic();//為頁面文本框綁定autotab插件
})
</script>
</head>
<body>
<h1>jQuery整理筆記七</h1>
<h2>Autotab自動Tab文本框</h2>
<form method="post" action="" id="autotab">
<label>請輸入驗證碼：
<input type="text" name="num1" id="num1" maxlength="3" size="3">
<input type="text" name="num2" id="num2" maxlength="3" size="3">
<input type="text" name="num3" id="num3" maxlength="3" size="3">
<input type="text" name="num4" id="num4" maxlength="3" size="3">
<input type="text" name="num5" id="num5" maxlength="3" size="3">
<input type="text" name="num6" id="num6" maxlength="3" size="3">
</form>
</body>
</html>
除了可以限定輸入長度外，還可以通過autotab_filter()方法限定輸入的字符類型，這個方法還能過濾大寫、小寫、空格、字母等，具體的用到了現(xiàn)查吧。
如果將上面的js改成：
$(function(){
$('#autotab').submit(function(){
return false;
});
$('#autotab :input').autotab_magic().autotab_filter('numeric');
})
就是只能輸入數(shù)字了。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
jQuery插件HighCharts繪制的2D堆柱狀圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制的2D堆柱狀圖效果,結(jié)合完整實例形式分析了jQuery插件HighCharts繪制2D柱狀圖的實現(xiàn)技巧與相關(guān)注意事項,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
jQuery的最大特色之一就是方法連綴寫法，這樣的書寫方式使得閱讀起來更加方便。2010-06-06
這個插件主要用于解決IE5.5與IE6.0下面的png圖片無法透明的解決方法，如果您的網(wǎng)站使用了png圖片而且訪客很大一部分是IE7之前的版本，可以使用這個。2010-08-08
最近做一個項目，許多功能都是關(guān)于彈出框的，在做的過程中發(fā)現(xiàn)會有好多自己考慮不到的問題，下面以一個示例為大家詳細介紹下，感興趣的朋友可以參考下2013-08-08
jQuery使用手冊之 事件處理...2007-03-03
jquery遍歷之parent()和parents()的區(qū)別及parentsUntil()方法詳解
這篇文章主要介紹了jquery遍歷之parent()和parents()的區(qū)別及parentsUntil()方法。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
用示例說明filter()與find()的用法以及children()與find()的區(qū)別分析
本篇文章介紹了，用示例說明filter()與find()的用法以及children()與find()的區(qū)別分析。需要的朋友參考下2013-04-04
jquery實現(xiàn)網(wǎng)站列表切換效果的2種方法
這篇文章主要為大家詳細介紹了jquery實現(xiàn)網(wǎng)站列表切換效果的2種方法，供大家參考，感興趣的小伙伴們可以參考一下2016-08-08
在做一個表單簽核系統(tǒng)時，需在要簽核頁面中將表單內(nèi)容（事先做好的PHP頁面）顯示出來，于就是想能不能利用Ajax技術(shù)把這個事先做好的頁面嵌入到簽核頁面中呢？2009-02-02
本文給大家匯總介紹了一下Jquery使用小技巧，算是比較全面了，一共26個小店，非常細致,需要的朋友可以參考下2015-12-12