jquery表單插件Autotab使用方法詳解
Autotab也是一款功能專一的表單插件,它提供了自動(dòng)跳格的功能,當(dāng)用戶輸入的字符數(shù)一旦超過已定義的最大長度,則會(huì)根據(jù)事先設(shè)置的目標(biāo)自動(dòng)跳轉(zhuǎn)到相應(yīng)元素上,省卻了
用戶按【Tab】鍵的麻煩。最典型的應(yīng)用就是輸入IP地址、軟件激活碼等地方了,我們做的web項(xiàng)目中也有很多地方可以用到這插件,對(duì)于提高用戶體驗(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>請(qǐng)輸入驗(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ù)字了。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(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)文章
easyui 中的datagrid跨頁勾選問題的實(shí)現(xiàn)方法
很多朋友都遇到這樣的需求,easyui的datagrid分頁顯示數(shù)據(jù),如果有需求要求勾選多條數(shù)據(jù)且不再同一頁中,easyui會(huì)保存在其他頁選中的數(shù)據(jù)嗎?小編結(jié)合資料自己整理了一篇文章,需要的的朋友參考下吧2017-01-01jQuery基于排序功能實(shí)現(xiàn)上移、下移的方法
這篇文章主要介紹了jQuery基于排序功能實(shí)現(xiàn)上移、下移的方法,結(jié)合實(shí)例形式分析了jQuery使用ajax與后臺(tái)php交互實(shí)現(xiàn)元素的排序,上移、下移功能相關(guān)操作技巧2016-11-11基于jquery實(shí)現(xiàn)鼠標(biāo)左右拖動(dòng)滑塊滑動(dòng)附源碼下載
這篇文章主要介紹了基于jquery實(shí)現(xiàn)鼠標(biāo)左右拖動(dòng)滑塊滑動(dòng)附源碼下載 的相關(guān)資料,需要的朋友可以參考下2015-12-12JQuery入門——用映射方式綁定不同事件應(yīng)用示例
通過映射的方式,給對(duì)象綁定多個(gè)事件,可能有很多的童鞋們不從使用過,不過,沒有關(guān)系本文將一一為您詳細(xì)介紹,感興趣的朋友可不要錯(cuò)過了啊,希望本文對(duì)你有所幫助2013-02-02jquery下利用jsonp跨域訪問實(shí)現(xiàn)方法
客戶端的跨域訪問,可以通過jsonp方式來實(shí)現(xiàn),jquery提供了跨域訪問的方法,jQuery.ajax()支持get方式的跨域。當(dāng)然支持跨域還需要服務(wù)器端相應(yīng)的處理。2010-07-07jquery處理頁面彈出層查詢數(shù)據(jù)等待操作實(shí)例
這篇文章主要介紹了jquery處理頁面彈出層查詢數(shù)據(jù)等待操作,實(shí)例分析了jquery實(shí)現(xiàn)等待效果的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03jquery插件ContextMenu設(shè)置右鍵菜單
這篇文章主要介紹了jquery插件ContextMenu設(shè)置右鍵菜單的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03菊花轉(zhuǎn)動(dòng)的jquery加載動(dòng)畫效果
我們這次給大家?guī)淼氖顷P(guān)于用jquery實(shí)現(xiàn)菊花轉(zhuǎn)動(dòng)的加載動(dòng)畫效果,以及相關(guān)實(shí)例代碼,有興趣的朋友可以學(xué)習(xí)下。2018-08-08