位置: 编程技术 - 正文

js仿支付宝填写支付密码效果实现多方框输入密码(支付宝是怎么写)

编辑:rootadmin

推荐整理分享js仿支付宝填写支付密码效果实现多方框输入密码(支付宝是怎么写),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:支付宝上怎么写,支付宝怎么填写,支付宝上怎么写,我的支付宝怎么写,支付宝怎么写,js调用支付宝,js支付宝支付,js调用支付宝,内容如对您有帮助,希望把文章链接给更多的朋友!

不知道怎么描述标题,先看截图吧,大致的效果就是一个框输入一位密码。

js仿支付宝填写支付密码效果实现多方框输入密码(支付宝是怎么写)

最开始实现的思路是一个小方框就是一个type为password的input,每输入一位自动跳到下一位,删除一位就自动跳到前一位,android上是OK的,很平滑也没有bug,但是ios上会出现键盘频繁调起和关闭,非常影响用户体验。原因估计是每个input会不断的focus和blur,每次focus会调起键盘,blur又会关闭键盘,so....此方案肯定不行了。

PM非要实现这种效果,木有办法~拗不过,一句用户体验不好会让你没话说,谁要咱是前端呢~拗不过就找解决方案吧。

既然多个是频繁focus和blur导致的问题,又必须是密码框,那何不就用一个input框来输入呢,小方框就用别的方式模拟,开干。

下面是实现的样式:

大致的思路就是动态监听真实密码框的输入修改小方框内密码框的内容。

其实效果实现不难,关键是思路还有解决该死的兼容,完成该效果的时候IOS会有闪动的光标,android没有,然后找一系列方法去隐藏光标,比如focus时候设置text-indent,color设置transparent等等,但都无济于事,后来发现淘宝有个办法是focus时候把密码框丢到一边去,因为外层有overflow hidden,完美解决了问题。

标签: 支付宝是怎么写

本文链接地址:https://www.jiuchutong.com/biancheng/377469.html 转载请保留说明!

上一篇:jquery实现文本框textarea自适应高度(jquery怎么给文本框赋值)

下一篇:javascript获取wx.config内部字段解决微信分享(JavaScript获取元素)

  • 小规模纳税人的账务处理
  • 税率的具体形式
  • 售卖会卡,达标返现,怎么进行账务处理
  • 电子税务局发票验旧怎么操作
  • 机票抵扣进项只能在发生当月吗
  • 纳税申报财务报表上期数
  • 减半征收的印花税缴纳所得税吗
  • 流动资产增幅
  • 基本医疗保险基金与生育保险基金
  • 股权转让中土地增值是否交纳个人所得税
  • 税收返还要交税吗
  • 逾期包装物押金消费税会计分录
  • 营改增后企业缴税种类
  • 个税经营所得预扣预缴
  • 现金流量净额为负说明什么
  • 金三接口调用失败怎么办?
  • 收购报废车有利润吗
  • 没有社保的工人怎么办
  • 个人所得税算少了怎么办
  • php文件类型码
  • 跨年冲减无发票怎么入账
  • 公司账户存款
  • 股东未实缴资本,因为经营困难借给公司钱,可以要求返还
  • php实用的案例
  • 怎样识别?
  • PHP简单实现HTTP和HTTPS跨域共享session解决办法
  • 职工医保报销会扣医保卡的钱吗
  • 世界上寿命最长的灯泡是什么品牌
  • php模板源码
  • php中可用于设置变量类型的函数
  • vue项目页面跳转
  • 对方代垫保险费算不算入账价值
  • 端午节发现金怎么说
  • mybatis plus 用法
  • 银行存款向灾区捐款
  • 付报刊费计入什么科目
  • 微信收款怎么记录怎么删除
  • 购入的机器设备
  • phpcms验证码不显示
  • 年末财务报表是什么
  • mysql数据库查询表命令
  • 纳税人及时提供信息
  • 内资非独立核算的企业
  • 员工加班打车费报销
  • 财政补助收入怎样申报企业所得税
  • 预付款开了增值税专票怎么办
  • 自产产品发给职工做福利的会计处理
  • 押金为什么要一个月才退
  • 收到第三方补助怎么做账
  • 进项抵扣后的附加税
  • 公司原股东转让全部股权误把认缴金额写成转让金额
  • 什么是履约义务,举例
  • 施工企业其他业务收入包括哪些
  • 个体工商户个税2023最新政策
  • 支付信息表
  • win10的java环境该怎么配置?java环境变量配置介绍
  • linux安装openssh-server
  • window msconfig
  • linux ldt
  • windows无法访问\\192.168.1.104
  • windows10x预览版
  • win7桌面右键菜单多余选项删除
  • win8功能
  • cocos creator 动画制作
  • The graphics pipeline ,Open GL 渲染管线
  • 如何正确使用标准电池和检流计
  • Unity3d TweenPosition.Begin()的使用浅析
  • js按位运算符
  • 安卓手机自定义ua
  • python最简单
  • JavaScript中Math.SQRT2属性的使用详解
  • jquery 动态添加列表元素
  • 欢欢长大了的童年
  • JavaScript Switch 声明
  • js基本代码
  • 税务注销后发现报表报错的怎么办
  • 汽车排量与购置税的关系
  • 年度纳税申报基础信息表怎么填
  • 加油账单怎么查询
  • 关于增值税和消费税两者之间关系的说法错误的是
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设