位置: 编程技术 - 正文

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获取元素)

  • 税收滞纳金还会计算滞纳金吗
  • 关税完税价格是指什么意思
  • 赞助支出和广告支出的区别
  • 公司买车计算方式
  • 二手车交啥税
  • 企业预缴的增值税税率
  • 预付账款下月做什么科目
  • 废气处理工程会计分录
  • 汽车装饰装潢税率
  • 去税务局领用发票要多久
  • 如何区分劳务派遣和劳动合同
  • 发票备注有法律效力吗
  • 房产税先征后免会计处理
  • 代缴社保工资怎么做账
  • 上年度少计提的税金及附加
  • 苹果14.5新功能
  • 以物抵债的会计分录
  • 在win10系统中,如何限制孩子玩原神游戏
  • 其他生活服务业增值税税率
  • nvidia gpu系列
  • php数组函数 菜鸟
  • 通过二手车买进套现
  • 消费税的计算过程
  • 怎么计算土地增值税金额
  • 享受小型微利企业税收优惠的条件
  • zend framework手册
  • java开发和运维
  • yolox改进
  • css基础实验报告
  • yolov5训练自己的模型配置到单片机
  • python操作csv
  • 个体双定户税率
  • 小企业库存商品会计分录
  • 事业收入如何确认
  • 会计计入其他业务收入的有哪些
  • 织梦专题页模板
  • 开具增值税专用发票的承诺书
  • 发票识别
  • 会计科目累计摊销
  • 支付土地补偿款账务处理
  • 税前扣除的意思
  • 城建税的征收范围不包括农村
  • 制单会计岗位风险点
  • 初级会计实务中第二章第四节存货(5)费琪
  • 如果不签合同会怎么样
  • 代销产品如何做会计分录
  • 境外分回的股息在本国抵免限额怎么算
  • 优秀员工奖金领取表模板
  • 税务局收款收据
  • 餐饮发票如何入账
  • 资产损失根据发票核算
  • 企业营业外支出是什么意思
  • 事业单位补提以前年度应计提未计折旧的会计分录
  • 征税体制
  • 多交增值税不能抵扣
  • 分公司注销余额转总公司会计分录
  • 股权转让如何避免转让前债务
  • 营业收入和主营业务收入分别在哪看
  • mysql 生成guid
  • sql查询速度慢如何优化
  • mysql 5.7.12 winx64手动安装教程
  • 不用光盘不用u盘怎么安装系统
  • centos docker安装部署
  • fedora怎么安装软件
  • windows tasks文件夹
  • 什么叫linux
  • win7桌面没有了怎么办
  • win7系统在那个文件夹
  • Win10 Mobile10586.122更新了哪些内容?更新内容大全汇总
  • linuxvim编辑器的用法
  • linux下VSFTP 530 Permission denied错误的解决办法
  • android如何运行项目
  • shell脚本 !
  • unity uma
  • jQuery simpleModal插件的使用介绍
  • js如何截取中文字符
  • python编程简单案例
  • 无锡吴氏字辈
  • 中牟地税局电话
  • 广东省国税局局长潘
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设