位置: 编程技术 - 正文

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字符串定义的三种方式
  • 对公账户开户费开户的时候就要交钱吗
  • 我的世界1.12.2优化下载
  • url是什么软件
  • 汇兑损失是否可以抵扣
  • 应收的罚款收入计入什么科目
  • laravel enum
  • 实收资本明细账模板
  • CLIP模型原理
  • php正则表达式实例
  • 租赁公司的
  • 维修费成本怎么结转
  • 2021年前端还火吗
  • php正则匹配a标签href
  • #cookie jar
  • 逐帧flash动画
  • 残保金计税基数是什么
  • 进项税额转出需要补税
  • 一个简单的web项目名称
  • 手机上动态调试apk
  • 计算机网络面试八股文
  • mongodb官方文档中文
  • 文化事业建设费税收优惠2023
  • 企业停工期间发生的费用如何处理
  • 应付账款不用付情况说明
  • 股权转让会计分录借银行存款
  • 最新出口退税申报需要哪些资料
  • 银行手续费如何做账务处理
  • 为什么出口退税率低于适用税率
  • 暂估成本的账务处理分录
  • 补助资金如何做账
  • 应交税费应交增值税借贷方向
  • 认证后的进项税额留抵退税
  • mysql删除的数据恢复
  • win7系统软件安装就闪退怎么办
  • 新百伦588
  • ipad和iPhone的mac地址区别
  • macbookpro双系统和虚拟机
  • 还原windows是什么意思
  • explorer.exe是什么指令
  • win10图标预览
  • threejs加载obj模型颜色不对
  • 教你如何使用玻璃胶
  • 实用的批处理
  • 通过制作日晷我们可以探索发现一天之中
  • js滚动条怎么调出来
  • javascript基础笔记
  • javascript 对象
  • 使用jQuery Rotare实现微信大转盘抽奖功能
  • listview.items.add
  • 财税专家刘杨简历图片介绍
  • 如何查询企业税号
  • 陕西省地方税务局关于调整土地增值税预征率的公告
  • 一般纳税人出售房产怎么开票
  • 云南地方税务局电话
  • 国地税合并人员瘦身
  • 二套房办房产证税费怎么算的
  • 企业2017年
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设