JavaScript實(shí)現(xiàn)PC端四格密碼輸入框功能
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)PC端四格密碼輸入框的具體代碼,供大家參考,具體內(nèi)容如下
html代碼如下
比較簡潔的一個(gè)demo
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>四個(gè)密碼輸入框</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個(gè)字符后,自動(dòng)切換光標(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)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript仿京東導(dǎo)航左側(cè)分類導(dǎo)航下拉菜單效果
這篇文章主要為大家詳細(xì)介紹了javascript仿京東導(dǎo)航左側(cè)分類導(dǎo)航下拉菜單效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-03-03js實(shí)現(xiàn)的仿新浪微博完美的時(shí)間組件升級(jí)版
本博客沒有華麗的布局,只求樸實(shí)的js的代碼,只為js代碼愛好者提供,一周大概會(huì)出1-2篇js前沿代碼的文章.只是代碼,不說技術(shù)2011-12-12JavaScript 快捷鍵設(shè)置實(shí)現(xiàn)代碼
屏蔽Alt+F4等快捷鍵 IE Javascript快捷鍵操作2009-03-03Cropper.js進(jìn)階之裁剪后保存至本地實(shí)現(xiàn)示例
這篇文章主要為大家介紹了Cropper.js進(jìn)階之裁剪后保存至本地實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05JS實(shí)現(xiàn)禁止高頻率連續(xù)點(diǎn)擊的方法【基于ES6語法】
這篇文章主要介紹了JS實(shí)現(xiàn)禁止高頻率連續(xù)點(diǎn)擊的方法,通過事件監(jiān)聽結(jié)合定時(shí)器實(shí)現(xiàn)針對(duì)高頻率點(diǎn)擊的限制操作,該功能基于ES6語法實(shí)現(xiàn),需要的朋友可以參考下2017-04-04javascript計(jì)算當(dāng)月剩余天數(shù)(天數(shù)計(jì)算器)示例代碼
本文介紹了利用Javascript在網(wǎng)頁上計(jì)算當(dāng)前月份的剩余天數(shù)的方法,大家參考使用吧2014-01-01js行號(hào)顯示的文本框?qū)崿F(xiàn)效果(兼容多種瀏覽器 )
本文主要介紹了javascript實(shí)現(xiàn)行號(hào)顯示的文本框效果,這樣就可以解決讀者很難迅速找到所在某一行的對(duì)應(yīng)代碼,感興趣的小伙伴們可以參考一下2015-10-10