jquery表單插件Autotab使用方法詳解
更新時(shí)間：2016年06月24日 11:45:46 投稿：lijiao
這篇文章主要為大家詳細(xì)介紹了jquery表單插件Autotab使用方法，Autotab自動(dòng)Tab文本框，感興趣的小伙伴們可以參考一下
Autotab也是一款功能專一的表單插件，它提供了自動(dòng)跳格的功能，當(dāng)用戶輸入的字符數(shù)一旦超過已定義的最大長度，則會(huì)根據(jù)事先設(shè)置的目標(biāo)自動(dòng)跳轉(zhuǎn)到相應(yīng)元素上，省卻了
用戶按【Tab】鍵的麻煩。最典型的應(yīng)用就是輸入IP地址、軟件激活碼等地方了，我們做的web項(xiàng)目中也有很多地方可以用到這插件，對于提高用戶體驗(yàn)還是很有幫助的。
使用時(shí)需要引入jquery.autotab.js,下載地址：點(diǎn)擊進(jìn)入下載頁面
<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自動(dòng)Tab文本框</h2>
<form method="post" action="" id="autotab">
<label>請輸入驗(yàn)證碼：
<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()方法限定輸入的字符類型，這個(gè)方法還能過濾大寫、小寫、空格、字母等，具體的用到了現(xiàn)查吧。
如果將上面的js改成：
$(function(){
$('#autotab').submit(function(){
return false;
});
$('#autotab :input').autotab_magic().autotab_filter('numeric');
})
就是只能輸入數(shù)字了。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JQuery打造PHP的AJAX表單提交實(shí)例
- jquery ajax提交表單數(shù)據(jù)的兩種方式
- jquery獲取input表單值的代碼
- jquery validate.js表單驗(yàn)證的基本用法入門
- JQuery通過Ajax提交表單并返回結(jié)果
- jQuery EasyUI API 中文文檔 - Form表單
- jQuery實(shí)現(xiàn)form表單reset按鈕重置清空表單功能
- jQuery-serialize()輸出序列化form表單值的方法
- jquery實(shí)現(xiàn)ajax提交form表單的方法總結(jié)
- jQuery使用ajaxSubmit()提交表單示例
相關(guān)文章
jQuery插件HighCharts繪制的2D堆柱狀圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制的2D堆柱狀圖效果,結(jié)合完整實(shí)例形式分析了jQuery插件HighCharts繪制2D柱狀圖的實(shí)現(xiàn)技巧與相關(guān)注意事項(xiàng),并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
jQuery的最大特色之一就是方法連綴寫法，這樣的書寫方式使得閱讀起來更加方便。2010-06-06
這個(gè)插件主要用于解決IE5.5與IE6.0下面的png圖片無法透明的解決方法，如果您的網(wǎng)站使用了png圖片而且訪客很大一部分是IE7之前的版本，可以使用這個(gè)。2010-08-08
最近做一個(gè)項(xiàng)目，許多功能都是關(guān)于彈出框的，在做的過程中發(fā)現(xiàn)會(huì)有好多自己考慮不到的問題，下面以一個(gè)示例為大家詳細(xì)介紹下，感興趣的朋友可以參考下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實(shí)現(xiàn)網(wǎng)站列表切換效果的2種方法
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)網(wǎng)站列表切換效果的2種方法，供大家參考，感興趣的小伙伴們可以參考一下2016-08-08
jQuery Div中加載其他頁面的實(shí)現(xiàn)代碼
在做一個(gè)表單簽核系統(tǒng)時(shí)，需在要簽核頁面中將表單內(nèi)容（事先做好的PHP頁面）顯示出來，于就是想能不能利用Ajax技術(shù)把這個(gè)事先做好的頁面嵌入到簽核頁面中呢？2009-02-02
本文給大家匯總介紹了一下Jquery使用小技巧，算是比較全面了，一共26個(gè)小店，非常細(xì)致,需要的朋友可以參考下2015-12-12