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 相关文章推荐
修改发贴的编辑功能
Mar 07 Javascript
Javascript 去除数组的重复元素
May 04 Javascript
Javascript 浮点运算的问题分析与解决方法
Aug 27 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
Nov 28 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
Feb 24 Javascript
浅析Node.js的Stream模块中的Readable对象
Jul 29 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
Dec 14 Javascript
微信小程序 setData的使用方法详解
Apr 20 Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
Jul 31 Javascript
webpack多入口多出口的实现方法
Aug 17 Javascript
Vue toFixed保留两位小数的3种方式
Oct 23 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 Ubb代码编辑器函数代码
2012/07/05 PHP
php获取图片信息的方法详解
2015/12/10 PHP
php过滤输入操作之htmlentities与htmlspecialchars用法分析
2017/02/17 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
用jQuery简化JavaScript开发分析
2009/02/19 Javascript
JS运行耗时操作的延时显示方法
2010/11/19 Javascript
A标签中通过href和onclick传递的this对象实现思路
2013/04/19 Javascript
用js实现输入提示(自动完成)的实例代码
2013/06/14 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
JS+CSS实现Li列表隔行换色效果的方法
2015/02/16 Javascript
简单的分页代码js实现
2016/05/17 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
全面介绍vue 全家桶和项目实例
2017/12/27 Javascript
vue.js动画中的js钩子函数的实现
2018/07/06 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
我所理解的JavaScript中的this指向
2020/09/04 Javascript
python实现得到一个给定类的虚函数
2014/09/28 Python
详解python的几种标准输出重定向方式
2016/08/15 Python
python数据结构链表之单向链表(实例讲解)
2017/07/25 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
基于python生成英文版词云图代码实例
2020/05/16 Python
python中函数返回多个结果的实例方法
2020/12/16 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
自我评价范文
2013/12/22 职场文书
英语国培研修感言
2014/02/13 职场文书
如何写自我鉴定
2014/03/19 职场文书
倡议书范文
2014/04/16 职场文书
有限责任公司股东合作协议书范本
2014/10/30 职场文书
趣味运动会新闻稿
2015/07/17 职场文书
HTML速写之Emmet语法规则的实现
2021/04/07 HTML / CSS
Django实现翻页的示例代码
2021/05/24 Python
深入理解margin塌陷和margin合并的解决方案
2021/06/26 HTML / CSS