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 相关文章推荐
pjblog中的UBBCode.js
Apr 25 Javascript
js 页面刷新location.reload和location.replace的区别小结
Dec 24 Javascript
js中的数组Array定义与sort方法使用示例
Aug 29 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
Apr 10 Javascript
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
Feb 28 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
JS获取鼠标相对位置的方法
Sep 20 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
Jul 03 Javascript
Js利用prototype自定义数组方法示例
Oct 20 Javascript
Vue实现简单的拖拽效果
Aug 25 Javascript
react ant Design手动设置表单的值操作
Oct 31 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 curl获取301或302转向的网址问题的解决方法
2011/06/02 PHP
php字符串截取的简单方法
2013/07/04 PHP
laravel实现登录时监听事件,添加登录用户的记录方法
2019/09/30 PHP
用函数式编程技术编写优美的 JavaScript_ibm
2008/05/16 Javascript
JQuery 学习笔记 选择器之二
2009/07/23 Javascript
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
2015/05/19 Javascript
Bootstrap每天必学之折叠(Collapse)插件
2016/04/25 Javascript
JS操作JSON方法总结(推荐)
2016/06/14 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
2017/09/20 jQuery
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
Element UI框架中巧用树选择器的实现
2018/12/12 Javascript
微信小程序textarea层级过高的解决方法
2019/03/04 Javascript
Vue form表单动态添加组件实战案例
2019/09/02 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
2019/09/06 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
2019/09/21 Javascript
js实现盒子移动动画效果
2020/08/09 Javascript
python微信好友数据分析详解
2018/11/19 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
python 实现图片批量压缩的示例
2020/12/18 Python
matplotlib绘制多子图共享鼠标光标的方法示例
2021/01/08 Python
HTML5文档结构标签
2017/04/21 HTML / CSS
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
法学专业本科生自荐信范文
2013/12/17 职场文书
教师网络培训感言
2014/03/09 职场文书
家长会主持词开场白
2014/03/18 职场文书
买房委托公证书
2014/04/08 职场文书
秋季校运会广播稿100字
2014/09/18 职场文书
2015年评职称工作总结范文
2015/04/20 职场文书
高考诚信考试承诺书
2015/04/29 职场文书
2015年惩防体系建设工作总结
2015/05/22 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers
python生成随机数、随机字符、随机字符串
2021/04/06 Python
解决Mysql中的innoDB幻读问题
2022/04/29 MySQL