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 相关文章推荐
用于deeplink的js方法(判断手机是否安装app)
Apr 02 Javascript
JavaScript入门基础
Aug 12 Javascript
javascript图片预加载完整实例
Dec 10 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
Aug 01 Javascript
jstree的简单实例
Dec 01 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
详解webpack + react + react-router 如何实现懒加载
Nov 20 Javascript
原生JS控制多个滚动条同步跟随滚动效果
Dec 22 Javascript
mpvue跳转页面及注意事项
Aug 03 Javascript
React router动态加载组件之适配器模式的应用详解
Sep 12 Javascript
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
vue基于Teleport实现Modal组件
May 31 Vue.js
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获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
PHP实现自动对图片进行滚动显示的方法
2015/03/12 PHP
Yii2实现中国省市区三级联动实例
2017/02/08 PHP
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
javascript实现删除前弹出确认框
2015/06/04 Javascript
jQuery EasyUi 验证功能实例解析
2017/01/06 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
2017/03/19 Javascript
JavaScript数据结构之二叉树的删除算法示例
2017/04/13 Javascript
JavaScript实现前端分页控件
2017/04/19 Javascript
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
vue下history模式刷新后404错误解决方法
2018/08/18 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
利用打码兔和超人打码自封装的打码类分享
2014/03/16 Python
跟老齐学Python之Python文档
2014/10/10 Python
Python中的Descriptor描述符学习教程
2016/06/02 Python
numpy返回array中元素的index方法
2018/06/27 Python
python3 面向对象__类的内置属性与方法的实例代码
2018/11/09 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
python下载库的步骤方法
2019/10/12 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
python MD5加密的示例
2020/10/19 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
Python 虚拟环境工作原理解析
2020/12/24 Python
华润集团网上药店:健一网
2016/09/19 全球购物
焊接专业毕业生求职信
2013/10/01 职场文书
培训专员岗位职责
2014/02/26 职场文书
保护环境倡议书范文
2014/05/13 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
巾帼标兵事迹材料
2014/12/26 职场文书
Python OpenCV实现图像模板匹配详解
2022/04/07 Python
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js