位置: 编程技术 - 正文

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

  • 企业签订技术培训合同是否需要缴纳印花税?
  • 租赁服务增值税税率
  • 税率如何计算公式
  • 已收货款没发货怎么退款
  • 公对公退款要交税吗
  • 押金不退转收入的情况说明
  • 接受投资的固定资产账务处理
  • 机动车临时号牌有效期多久
  • 库存商品报废进项转出
  • 融资租赁开始日最低租赁付款额
  • 延迟抵扣的税务风险
  • 差额纳税怎么记账
  • 关于7.1号增值税普通发票新规
  • 建筑增值税抵扣怎么算
  • 税控盘的购买流程
  • 收到退回的银行汇票会计分录
  • 小规模企业企业所得税优惠政策2022年
  • 补领以前月份的工资如何计算个人所得税?
  • 此windows副本不是正版影响电脑使用吗
  • microsoft edge怎么改成ie11
  • 财务报表包括哪三大报表?(多选)
  • 产品试用装怎么做会计分录
  • 提供建筑安装服务
  • php 字符串
  • phpstudy的ftp
  • php的工作流程
  • 电脑卡住了按什么键回到桌面
  • jsPDF + html2canvas A4分页截断 完美解决方案(含代码 + 案例)
  • 销售点的增值税计算公式
  • 事业单位成本核算制度
  • 热带雨林瀑布群雪野
  • 北极野生动物
  • 图像相似性度量
  • Javan tree frogs sitting together on a stalk in Indonesia (© SnapRapid/Offset by Shutterstock)
  • thinkphp yii
  • maven安装成功命令
  • react_router
  • 网络命令netstat
  • Yii2针对游客、用户防范规则和限制的解决方法分析
  • dos命令暂停停10s
  • 电缆租赁发票开具属于什么项目
  • 货物入库会计分录怎么做
  • 织梦文档网站模板
  • 房地产开发企业成本核算方法
  • 收到发票并支付货款怎么做账
  • 工程服务费会计怎么做账
  • 汇算清缴时资产折旧怎么填
  • 无票收入的增值税税率
  • 国际结算手续费收入增值税
  • 去年一个月工资未计提直接计入成本,现在如何调整
  • 备用金被盗刷了怎么办
  • 招待费的增值税怎么算
  • 出口转内销增值税报表怎么填
  • 投资性房地产如何进行初始计量
  • 所得税多缴纳分录
  • 公司打到个人账户的钱算公款吗
  • 企业零申报要报哪些税
  • 买给员工吃的零食内容怎么写
  • 长期待摊费用什么时候结束摊销
  • 使用sql查询
  • linux下安装mysql简单的方法
  • mac备忘录怎么使用
  • Win8.1怎么打开无线网卡
  • os x10.10.3beta5官网下载 yosemite10.10.3beta5下载地址
  • win7的打开方式在哪里
  • 在linux中使用什么命令可以执行shell脚本
  • javascript教程
  • perl \w
  • 一键删除通讯录联系人
  • centos7如何分区
  • js中正则表达式语法
  • 编写一个bash脚本程序,用for循环实现
  • unity3d如何导入图片
  • linux bash命令详解
  • python如何发送http请求
  • JavaScript+html5 canvas制作的百花齐放效果完整实例
  • 个人所得税减免标准及明细
  • 全国书法等级考试官网
  • 下载安徽税务app并安装
  • 新疆国税网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设