JavaScript实现PC端四格密码输入框功能
更新时间：2020年02月19日 07:24:19 作者：嘘，此处属於婷
这篇文章主要为大家详细介绍了JavaScript实现PC端四格密码输入框功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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声明变量名的语法规则，非常有助于大家学习javascript，有需要的小伙伴可以参考下。2015-07-07
这篇文章主要介绍了JavaScript中声明全局变量三种方式的异同。变量及变量声明是一门语言最基本的概念，初学者都会很快掌握。需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要介绍了JS实现的跨浏览器解析XML文件的方法,结合实例形式分析了javascript基于ActiveXObject操作xml文件的加载与解析相关技巧,需要的朋友可以参考下2016-06-06
这篇文章主要介绍了JavaScript之Blob对象类型的具体使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要为大家介绍了Cropper.js进阶之实现圆形头像裁剪功能示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
省市二级联动效果，实现方法有很多，不过其他文章中介绍的都比较笼统，在本文有一个详细的实现过程，使用原生js很容易理解，希望大家可以参考下2013-09-09
实现的效果是当鼠标移到某一个标签的时候，在下面的内容区显示对应的内容，并且相应标签的颜色需要改变,这样的效果是CSS和JS配合实现的,下面我们就来看看具体代码2013-04-04
这篇文章主要为大家详细介绍了原生JS实现留言板，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
!!一般用来将后面的表达式强制转换为布尔类型的数据（boolean），也就是只能是true或者false。下面看看通过本文给大家介绍了JS中的!!，需要的朋友参考下吧2017-12-12
Uni-App用uView组件库中u-picker实现地区的省-市-区三级联动、确认及回显
最近项目要使用uni-app遇到省市县三级联动的问题,下面这篇文章主要给大家介绍了关于Uni-App用uView组件库中u-picker实现地区的省-市-区三级联动、确认及回显的相关资料,需要的朋友可以参考下2023-12-12
最新评论