手机端六位密码输入框

最新推荐文章于 2023-08-29 17:18:29 发布
最新推荐文章于 2023-08-29 17:18:29 发布
阅读量430 收藏 1
点赞数
分类专栏： 移动端 文章标签： 密码 手机
  1. 转载自网名为qiuqingpo的网友
  2. <!DOCTYPE html>  
  3. <html>  
  4. <head>  
  5. <script src="http://zeptojs.com/zepto.min.js"></script>  
  6.   <title>手机端六位密码输入</title>  
  7. <style>  
  8. .pwd-box{  
  9.         width:310px;  
  10.         padding-left: 1px;  
  11.         position: relative;  
  12.         border: 1px solid #9f9fa0;  
  13.         border-radius: 3px;  
  14. over-flow:hidden  
  15.     }  
  16.     .pwd-box input[type="tel"]{  
  17.         width: 99%;  
  18.         height: 45px;  
  19.         color: transparent;  
  20.         position: absolute;  
  21.         top: 0;  
  22.         left: 0;  
  23.         border: none;  
  24.         font-size: 18px;  
  25.         opacity: 0;  
  26.         z-index: 1;  
  27.         letter-spacing: 35px;  
  28.     }  
  29.     .fake-box input{  
  30.         width: 44px;  
  31.         height: 48px;  
  32.         border: none;  
  33.         border-right: 1px solid #e5e5e5;  
  34.         text-align: center;  
  35.         font-size: 30px;  
  36.     }  
  37.     .fake-box input:nth-last-child(1){  
  38.         border:none;  
  39.     }  
  40. </style>  
  41. </head>  
  42. <body>  
  43. <div class="pwd-box">  
  44.     <input type="tel" maxlength="6" class="pwd-input" id="pwd-input">  
  45.     <div class="fake-box">  
  46.         <input type="password" readonly="">  
  47.         <input type="password" readonly="">  
  48.         <input type="password" readonly="">  
  49.         <input type="password" readonly="">  
  50.         <input type="password" readonly="">  
  51.         <input type="password" readonly="">  
  52.     </div>  
  53. </div>  
  54. <script>  
  55. var $input = $(".fake-box input");  
  56.             $("#pwd-input").on("input", function() {  
  57.                 var pwd = $(this).val().trim();  
  58.                 for (var i = 0, len = pwd.length; i < len; i++) {  
  59.                     $input.eq("" + i + "").val(pwd[i]);  
  60.                 }  
  61.                 $input.each(function() {  
  62.                     var index = $(this).index();  
  63.                     if (index >= len) {  
  64.                         $(this).val("");  
  65.                     }  
  66.                 });  
  67.                 if (len == 6) {  
  68.                     //执行其他操作  
  69.                 }  
  70.             });  
  71. </script>  
  72. </body>  
  73. </html>  
移动端密码及验证码输入框
StoneIT_ZL的博客
09-12 3913
解决问题： 多个input框连续输入iOS键盘隐藏问题在ios由于focus事件默认被禁止，对于密码或验证码输入框，如果使用多个input框，每输入以为都会使键盘隐藏，输入下一位需要重新点击 input 框调出键盘，造成很不好的体验以下的方式仅提供的是四位短信验证码的解决方案，密码输入解决方案类似，可在其基础上改造；解决方式是使用一个input框，在其上放置四个span，使输入的值显示在span中
vue3制作类微信的六位的密码输入框
最新发布
m0_73481765的博客
12-14 1010
这是一个 Vue 3 组件，用于创建一个自定义的密码输入框。这个输入框由6个小输入框组成，每个小输入框只能输入一个字符。当用户在一个小输入框中输入字符后，焦点会自动跳到下一个输入框，直到所有6个输入框都填满为止。当6个字符都输入完成后，会触发一个名为 'input-complete' 的自定义事件，并将输入的密码作为参数传递出去。
自定义纯数字键盘 + 只能输入6位数字密码输入框2个demo
11-18
自定义纯数字键盘 + 只能输入6位数字密码输入框2个demo
安卓6位支付密码输入框
qq_35830053的博客
11-21 618
import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.RectF; impo
移动端自动连续输入密码和连续删除密码
lixiaohua66的博客
02-09 531
需求：用户打开页面自动聚焦第一个密码输入框，限制输入一个数字，输入完毕后自动聚焦下一个密码输入框；当删除的时候也可连续删除；html：&lt;input type="text" maxlength="1" autofocus="autofocus"&gt; &lt;input type="text" maxlength="1" &gt; &lt;input type=&
六位数字输入框(适用于填写验证码)
weixin_43845037的博客
10-12 2120
这几天闲得无聊，心血来潮逛了一下苹果的官网，然后进行登录的时候发现需要输入手机号验证码，于是就有了下图 ~ ~ ， 这种六位数字框瞬间就感觉很大气有木有 ???????? 于是心血来潮仿造了一个。 这是我自己仿出来的 样式有点丑/(ㄒoㄒ)/~~ 可以拦截非数字输入，有一个BUG没有解决，就是输入法中中文状态下无法实现自动位移， 因为接受到的键盘Ascii被输入法篡改了，暂时想不出解决办法，欢迎指导。...
仿微信支付宝六位数密码输入框的设计与实现
2. 输入限制：六位数密码框限制用户输入数字的位数为6位，这样的设计可以满足一些特定的业务需求，比如简单的身份验证或支付过程中的快速输入。 3. 拷贝微信支付宝设计：仿微信和支付宝的密码框意味着模拟这两款...
Android开发 自带清除按钮 密码可见 自定义EditText输入框
01-03
本文将深入探讨如何基于Android系统原生的EditText控件，实现一个带有清除按钮、可切换密码可见性的自定义输入框。这个组件特别适用于处理需要输入密码或者短信验证码的场景，它能提供更加友好的交互方式，提升用户...
jQuery手机移动端数字密码输入框特效
06-10
《jQuery手机移动端数字密码输入框特效详解》 在当今移动互联网时代，安全支付已经成为日常生活中不可或缺的一部分，而数字密码输入框则是确保交易安全的关键环节。本文将深入探讨一个基于jQuery的手机移动端数字...
vue3下的密码输入框（antdesignvue）
sinat_31773153的博客
08-29 1208
vue3下的密码输入框（antdesignvue）
jquery仿支付宝6位数字密码框特效代码
12-24
jquery仿支付宝6位数字密码框特效代码jquery仿支付宝6位数字密码框特效代码
HTML5密码输入框最新Demo 下载
05-19
最新的密码显示与隐藏输入框，直接修改input标签type版
使用HTML和jQuery实现6位密码输入和数字键盘绘制
05-08
使用HTML和jQuery实现6位密码。使用H5结合JQuery，模仿支付宝和微信支付的六位密码输入，重新绘制定义数字键盘，在规定的数字键盘中的数字进行点击，将密码填进六格的输入框，一个简单的小demo，适合新手学习交流
移动端密码框
YingDaoMonkey的博客
10-11 459
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
小程序六位密码框简单实现方法
weixin_42161906的博客
01-05 1982
** 小程序六位密码框简单实现方法 ** 中心思想 设置六个input框 父级display:flex;布局你想要的样子就可以 下面再放一个用来输入的框 定位到上面六个排列好的框上层 设置z-index=“2或者更多” 接着在设置样式opacity:0，这样烦人的光标也能轻松隐藏。 js就不多说了 傻瓜式赋值，不写那么麻烦了 wxml部分 &lt;view style="position: re...
千万不要使用6位密码！密码破解速度全面披露
blogremover的专栏
06-26 1万+
【来源：驱动之家】 【作者：且听枫吟】 　　LockDown.com近日公布了一份采用“暴力字母破解”方式获取密码的“时间列表”。列表中按照密码长度、密码组合数量以及破解攻击模式来进行破解。　　从列表中我们可以看出，如果你用
手机端实现6位验证码输入框效果
热门推荐
shentibeitaokong的博客
05-03 1万+
也就是 界面上，6个input框 当初想着应该很简单的，结果做起来发现，还是坑蛮多的 首先的想法就是6个input框，每输入一个数字之后，切换到下一个input，即切换focus，昨晚发现安卓机很流畅啊，但是要命的是ios并不是那么流畅，有卡顿的感觉，输很快会导致感觉手机要卡死的感觉，当然要pass， 其次，我是不是可以一个input框，分成6个格子的样式呢，计算数字宽度，发现样太不友好了，...
6位密码输入框
canlanyangg的博客
04-24 1412
#import //_____________________________________________________________/ @interface SSGridPwdTF : UITextField @end //_____________________________________________________________/
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值