仿淘宝支付宝6位密码输入框

Posted Jakeylove3

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了仿淘宝支付宝6位密码输入框相关的知识,希望对你有一定的参考价值。

1.浏览器兼容:Chrome、IE6+、FireFox、Safari、Opera、360、搜狗。

2.预览见网址http://www.jq22.com/yanshi7704

3.源码见网址https://files.cnblogs.com/files/jakeylove3/6-bit-Password.zip

4.效果如下图: 

       

5.实现的原理:真实input框在上层,样式为透明,下层为模拟6位密码输入框的div(实际上鼠标点到的还是真实的input,只不过看不见而已)

        

 

以上是关于仿淘宝支付宝6位密码输入框的主要内容,如果未能解决你的问题,请参考以下文章

仿支付宝实现密码框输入

仿支付宝的登录界面

仿支付宝的登录界面

仿支付宝/微信的password输入框效果GridPasswordView解析

JS 仿支付宝input文本输入框放大组件

微信小程序6位支付密码输入框