JavaScript實現(xiàn)PC端四格密碼輸入框功能
更新時間：2020年02月19日 07:24:19 作者：噓，此處屬於婷
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)PC端四格密碼輸入框功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(xiàn)PC端四格密碼輸入框的具體代碼，供大家參考，具體內容如下
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：當輸入框1輸入1個字符后，自動切換光標到輸入框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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了javascript仿京東導航左側分類導航下拉菜單效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
本博客沒有華麗的布局,只求樸實的js的代碼,只為js代碼愛好者提供,一周大概會出1-2篇js前沿代碼的文章.只是代碼,不說技術2011-12-12
屏蔽Alt+F4等快捷鍵 IE Javascript快捷鍵操作2009-03-03
Cropper.js進階之裁剪后保存至本地實現(xiàn)示例
這篇文章主要為大家介紹了Cropper.js進階之裁剪后保存至本地實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要介紹了JS代碼如何獲取map的key，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
正如標題所言，js中||和&&的特性幫我們精簡了代碼的同時，也帶來了代碼可讀性的降低。這就需要我們自己來權衡了，下面有個不錯的示例2013-12-12
JS實現(xiàn)禁止高頻率連續(xù)點擊的方法【基于ES6語法】
這篇文章主要介紹了JS實現(xiàn)禁止高頻率連續(xù)點擊的方法,通過事件監(jiān)聽結合定時器實現(xiàn)針對高頻率點擊的限制操作,該功能基于ES6語法實現(xiàn),需要的朋友可以參考下2017-04-04
本文介紹了利用Javascript在網頁上計算當前月份的剩余天數的方法，大家參考使用吧2014-01-01
這篇文章主要為大家詳細介紹了小程序實現(xiàn)分頁查詢列表的模板，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
js行號顯示的文本框實現(xiàn)效果(兼容多種瀏覽器 )
本文主要介紹了javascript實現(xiàn)行號顯示的文本框效果，這樣就可以解決讀者很難迅速找到所在某一行的對應代碼，感興趣的小伙伴們可以參考一下2015-10-10