JavaScript实现PC端四格密码输入框功能


Posted in Javascript onFebruary 19, 2020

本文实例为大家分享了JavaScript实现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 相关文章推荐
json格式化/压缩工具 Chrome插件扩展版
May 25 Javascript
jquery 弹出层注册页面等(asp.net后台)
Jun 17 Javascript
异步加载script的代码
Jan 12 Javascript
简介JavaScript中的italics()方法的使用
Jun 08 Javascript
Javascript中arguments用法实例分析
Jun 13 Javascript
require.js的用法详解
Oct 20 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
vue.js利用defineProperty实现数据的双向绑定
Apr 28 Javascript
详细分析单线程JS执行问题
Nov 22 Javascript
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
JavaScript 点击触发复制功能实例详解
Nov 02 Javascript
layui之数据表格--与后台交互获取数据的方法
Sep 29 Javascript
vue实现带过渡效果的下拉菜单功能
Feb 19 #Javascript
Vue.js仿Select下拉框效果
Feb 18 #Javascript
JavaScript中的惰性载入函数及优势
Feb 18 #Javascript
jquery实现垂直手风琴导航栏
Feb 18 #jQuery
vue微信分享插件使用方法详解
Feb 18 #Javascript
jQuery表单校验插件validator使用方法详解
Feb 18 #jQuery
vue+ts下对axios的封装实现
Feb 18 #Javascript
You might like
彻底杜绝PHP的session cookie错误
2009/08/09 PHP
用PHP将数据导入到Foxmail的实现代码
2010/09/05 PHP
PHP统计数值数组中出现频率最多的10个数字的方法
2015/04/20 PHP
yii2.0框架场景的简单使用示例
2020/01/25 PHP
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
javascript打印html内容功能的方法示例
2013/11/28 Javascript
javascript 面向对象封装与继承
2014/11/27 Javascript
jQuery中last()方法用法实例
2015/01/06 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
2016/04/01 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
2017/05/24 Javascript
vue移动端下拉刷新和上拉加载的实现代码
2018/09/08 Javascript
深入理解JavaScript 中的执行上下文和执行栈
2018/10/23 Javascript
JavaScript使用小插件实现倒计时的方法讲解
2019/03/11 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
2020/11/26 Vue.js
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
python django集成cas验证系统
2014/07/14 Python
Python基于回溯法解决01背包问题实例
2017/12/06 Python
代码分析Python地图坐标转换
2018/02/08 Python
python批量查询、汉字去重处理CSV文件
2018/05/31 Python
关于Python作用域自学总结
2019/06/10 Python
Python笔试面试题小结
2019/09/07 Python
基于django和dropzone.js实现上传文件
2020/11/24 Python
德国最大的拼图在线商店:Puzzle.de
2016/12/17 全球购物
意大利高端时尚买手店:Stefania Mode
2018/03/01 全球购物
英国豪华针织品牌John Smedley的在线销售商:The Outlet by John Smedley
2018/04/08 全球购物
delegate与普通函数的区别
2014/01/22 面试题
如何将无状态会话Bean发布为WEB服务,只有无状态会话Bean可以发布为WEB服务?
2015/12/03 面试题
数据保密承诺书
2014/06/03 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
践行三严三实心得体会
2014/10/13 职场文书
2015年行政助理工作总结
2015/04/30 职场文书
2015年教研组工作总结
2015/05/04 职场文书
施工安全责任协议书
2016/03/23 职场文书
HR必备:销售经理聘用合同范本
2019/08/21 职场文书