JavaScript实现PC端四格密码输入框功能

2024-08-03 01:28:13

本文实例为大家分享了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仿支付宝密码输入框

现在很多时候大家付款的场景都是在手机上面,而随着H5页面的开发变得越来越方便,很多场景也从客户端搬到了浏览器中,其中支付这个场景就很自然的被放在了浏览器中.那么这样的输入框大家一定不会陌生吧: 那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签. 并且给这个5个input设置display: inline-block 属性,同时用<!- ->来消除元素直接的margin
JS中解决谷歌浏览器记住密码输入框颜色改变功能

谷歌浏览器记住密码输入框颜色会改变,并且字体颜色会变成黑色,如图输入框原来的样式是这样的然而记住密码后,输入框颜色就变成了黄色,并且字体变成了黑色这是由于谷歌浏览器的自带样式的缘故: input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { background-color: rgb(250, 255, 189); background-image: none; color: rgb(0, 0,
js模拟支付宝密码输入框

本文实例为大家分享了js模拟支付宝密码输入框效果的具体代码,供大家参考,具体内容如下效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> input{ width:60px; height:60px; fon
JavaScript仿支付宝6位数字密码输入框

前几天,项目有个功能和某宝购物支付密码的输入框有点类似,就自己写了这篇博文,权当总结笔记吧. 啰嗦半天了,直接上代码: 结构层: <div> <div>请在下方输入6位数字</div> <div class="ipt-box-nick"> <input type="tel" maxlength="6" class="ipt-real-nick"/> <div c
Vue.js数字输入框组件使用方法详解

本文实例为大家分享了Vue.js数字输入框组件的具体实现代码,供大家参考,具体内容如下效果入口页 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0
JavaScript实现输入框(密码框)出现提示语

有时候我们需要在登陆表单有一些提示语言,比如"请输入用户名"和"请输入密码"等语言,至于用户名好说,但是在密码框中出现"请输入密码"这样的语言就有点麻烦了,因为在密码框输入的内容不会以明码显示.如果动态的控制type属性的话就有兼容性问题,如果input已经存在于页面中的话,在IE8和IE8以下浏览器中,type属性是只读的.所以就得想其他办法,代码如下: <!DOCTYPE html> <html> <head&g
原生js实现密码输入框值的显示隐藏

本文实例为大家分享了js显示隐藏密码输入框值的具体代码,供大家参考,具体内容如下直接贴上代码 <!DOCTYPE html> <html> <head> <title>password intput demo</title> </head> <style type="text/css"> body{ margin:0px; background-color: white; font-family: '
javascript实现仿银行密码输入框效果的代码

效果: 密码输入框 function rand() { return Math.floor(Math.random()*10); } var rangenum = new Array(); var tem; for (var i = 0; i"+rangenum[i]+" "); } document.writeln(" 退格清除 "); } function input(i) { var pwd=document.form.pwd.value; if (
vue.js实现只能输入数字的输入框

在菜鸟教程里,看了vue.js的教程,看完后,练练手,就试着实现了只能输入数字的输入框.在之前的博客里,用jquery也实现了这样的功能,这里用vue.js来实现,把实现的过程记录下来如果只是一个输入框,要实现就非常的简单了,输入框的内容和数据绑定,给数据加一个监听器就可以了,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue</t
基于JS实现类似支付宝支付密码输入框

本文实现的是一个类似支付宝支付密码的界面,只可以输入数字,且只可以输入6位首先给大家展示下效果图,如果感觉不错,请参考实现代码. 1.样式表 .wrap{ margin: 10px auto; width: 329px; height: 640px; padding-top: 200px; } .inputBoxContainer{ width: 240px; height: 50px; margin: 0 auto; position: relative; } .inputBoxContai

JavaScript实现PC端四格密码输入框功能

相关推荐

随机推荐