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 相关文章推荐
Prototype 工具函数 学习
Jul 23 Javascript
JQuery中SetTimeOut传参问题探讨
May 10 Javascript
深入解析contentWindow, contentDocument
Jul 04 Javascript
TypeOf这些知识点你了解吗
Feb 21 Javascript
jQuery AJAX timeout 超时问题详解
Jun 21 Javascript
AngularJs自定义服务之实现签名和加密
Aug 02 Javascript
js 自带的 map() 方法全面了解
Aug 16 Javascript
jQuery复制节点用法示例(clone方法)
Sep 08 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
微信小程序wepy框架学习和使用心得详解
May 24 Javascript
layui form表单提交后实现自动刷新
Oct 25 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
Aug 07 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关于IE下的iframe跨域导致session丢失问题解决方法
2013/10/10 PHP
destoon找回管理员密码的方法
2014/06/21 PHP
destoon实现会员商铺中指定会员或会员组投放广告的方法
2014/08/21 PHP
yii用户注册表单验证实例
2015/12/26 PHP
Javascript中暂停功能的实现代码
2007/03/04 Javascript
用Javascript数组处理多个字符串的连接问题
2009/08/20 Javascript
js下利用控制器载入对应脚本
2010/07/17 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
2013/12/30 Javascript
网页运行时提示对象不支持abigimage属性或方法
2014/08/10 Javascript
javascript面向对象快速入门实例
2015/01/13 Javascript
jQuery使用之处理页面元素用法实例
2015/01/19 Javascript
JavaScript数组随机排列实现随机洗牌功能
2015/03/19 Javascript
JavaScript实现自动变换表格边框颜色
2015/05/08 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
谈谈javascript中使用连等赋值操作带来的问题
2015/11/26 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
js中变量的连续赋值(实例讲解)
2017/07/08 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
2017/09/22 jQuery
深入浅析var,let,const的异同点
2018/08/07 Javascript
python中实现php的var_dump函数功能
2015/01/21 Python
python Matplotlib画图之调整字体大小的示例
2017/11/20 Python
python使用代理ip访问网站的实例
2018/05/07 Python
python版本单链表实现代码
2018/09/28 Python
python 环境搭建 及python-3.4.4的下载和安装过程
2019/07/20 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
Python中求对数方法总结
2020/03/10 Python
解决Django no such table: django_session的问题
2020/04/07 Python
python字符串的index和find的区别详解
2020/06/20 Python
浅析Python 抽象工厂模式的优缺点
2020/07/13 Python
Python grequests模块使用场景及代码实例
2020/08/10 Python
python 下划线的不同用法
2020/10/24 Python
应届生骨科医生求职信
2013/10/31 职场文书
司机岗位职责
2013/11/15 职场文书
简历中自我评价范文3则
2013/12/14 职场文书
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书
社团活动总结格式
2014/08/29 职场文书