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 相关文章推荐
JQuery datepicker 使用方法
May 20 Javascript
纯jquery实现模仿淘宝购物车结算
Aug 20 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
Dec 24 Javascript
jQuery 操作input中radio的技巧
Jul 18 Javascript
JS实现去除数组中重复json的方法示例
Dec 21 Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 Javascript
详解React之key的使用和实践
Sep 29 Javascript
vue下拉菜单组件(含搜索)的实现代码
Nov 25 Javascript
Django模板继承 extend标签实例代码详解
May 16 Javascript
layui switch 开关监听 弹出确定状态转换的例子
Sep 21 Javascript
JavaScript中作用域链的概念及用途讲解
Aug 06 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 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代码包装修正版
2008/03/15 PHP
PHP导入Excel到MySQL的方法
2011/04/23 PHP
php通过ajax实现双击table修改内容
2014/04/28 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
ThinkPHP在Cli模式下使用模板引擎的方法
2015/09/25 PHP
谈谈 PHP7新增功能
2015/12/16 PHP
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
javascript 兼容所有浏览器的DOM扩展功能
2012/08/01 Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
2012/08/14 Javascript
Js为表单动态添加节点内容的方法
2015/02/10 Javascript
Javascript页面跳转常见实现方式汇总
2015/11/28 Javascript
JavaScript对象数组排序实例方法浅析
2016/06/15 Javascript
Node.js连接Sql Server 2008及数据层封装详解
2018/08/27 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
vue实现修改图片后实时更新
2019/11/14 Javascript
Python中的super()方法使用简介
2015/08/14 Python
利用Python+Java调用Shell脚本时的死锁陷阱详解
2018/01/24 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
python实现微信小程序自动回复
2018/09/10 Python
python列表,字典,元组简单用法示例
2019/07/11 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
django 扩展user用户字段inlines方式
2020/03/30 Python
Pycharm导入anaconda环境的教程图解
2020/07/31 Python
Expedia西班牙:预订酒店、机票、旅行和廉价度假套餐
2019/04/10 全球购物
学生干部的自我评价分享
2014/01/18 职场文书
体育教育毕业生自荐信
2014/06/29 职场文书
2015年社区计生工作总结
2015/04/21 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
2016年大学生实习单位评语
2015/12/01 职场文书
个人道歉信大全
2019/04/11 职场文书
Pytorch GPU内存占用很高,但是利用率很低如何解决
2021/06/01 Python
Python实现8种常用抽样方法
2021/06/27 Python
nginx配置指令之server_name的具体使用
2022/08/14 Servers