JavaScript實現(xiàn)PC端四格密碼輸入框功能
更新時間:2020年02月19日 07:24:19 作者:噓,此處屬於婷
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)PC端四格密碼輸入框功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(xiàn)PC端四格密碼輸入框的具體代碼,供大家參考,具體內(nèi)容如下
html代碼如下
比較簡潔的一個demo
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>四個密碼輸入框</title> <script type="text/javascript" src="jquery.min.js" ></script> </head> <style type="text/css"> input{ width:40px; height:40px; text-align: center; font-size:22px; } </style> <body> 支付密碼 <input type="password" name="pwd1" maxlength="1"/> <input type="password" name="pwd2" maxlength="1"/> <input type="password" name="pwd3" maxlength="1"/> <input type="password" name="pwd4" maxlength="1"/> </body> <script> //必須引入jquery才可以用 //1:當(dāng)輸入框1輸入1個字符后,自動切換光標(biāo)到輸入框2 $(document).ready(function(){ $("[name='pwd1']").bind("input",function(){ if($(this).val().length==1){ $("[name='pwd2']").focus(); } }) $("[name='pwd2']").bind("input",function(){ if($(this).val().length==1){ $("[name='pwd3']").focus(); }else if($(this).val().length==0){ $("[name='pwd1']").focus(); } }) $("[name='pwd3']").bind("input",function(){ if($(this).val().length==1){ $("[name='pwd4']").focus(); }else if($(this).val().length==0){ $("[name='pwd2']").focus(); } }) $("[name='pwd4']").bind("input",function(){ if($(this).val().length==0){ $("[name='pwd3']").focus(); } }) }) </script> </html>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript仿京東導(dǎo)航左側(cè)分類導(dǎo)航下拉菜單效果
這篇文章主要為大家詳細介紹了javascript仿京東導(dǎo)航左側(cè)分類導(dǎo)航下拉菜單效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-03-03JavaScript 快捷鍵設(shè)置實現(xiàn)代碼
屏蔽Alt+F4等快捷鍵 IE Javascript快捷鍵操作2009-03-03Cropper.js進階之裁剪后保存至本地實現(xiàn)示例
這篇文章主要為大家介紹了Cropper.js進階之裁剪后保存至本地實現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-05-05JS實現(xiàn)禁止高頻率連續(xù)點擊的方法【基于ES6語法】
這篇文章主要介紹了JS實現(xiàn)禁止高頻率連續(xù)點擊的方法,通過事件監(jiān)聽結(jié)合定時器實現(xiàn)針對高頻率點擊的限制操作,該功能基于ES6語法實現(xiàn),需要的朋友可以參考下2017-04-04javascript計算當(dāng)月剩余天數(shù)(天數(shù)計算器)示例代碼
本文介紹了利用Javascript在網(wǎng)頁上計算當(dāng)前月份的剩余天數(shù)的方法,大家參考使用吧2014-01-01js行號顯示的文本框?qū)崿F(xiàn)效果(兼容多種瀏覽器 )
本文主要介紹了javascript實現(xiàn)行號顯示的文本框效果,這樣就可以解決讀者很難迅速找到所在某一行的對應(yīng)代碼,感興趣的小伙伴們可以參考一下2015-10-10