来扒一扒淘宝“确认收货”时的密码输入框的实现

忘了从何时开始,淘宝的密码输入框从以前常见的标准<input>换成了一个比较独特的密码输入框,就是这样的:

1

乍一看呢,这密码输入框似乎就是6个<input>。

本来我也没注意到它,但今天下午剁手的时候便想研究下这东西的实现,万一以后产品提出要我做个这东西也不至于一脸懵逼

 


 

第一步:

首先呢,掏出咱的开发者工具,看看这东西到底是啥。

2

 

嗯。。。似乎实现很简单,就是一个class为“sixDigitPassword”的div,里面有i*6以及span*1,每个<i>里面都有一个<b>,并且都有内联样式。接下来一个一个看这里面的每个元素都是干嘛的

 

首先呢,先从<i>开始

3

看这个<i>的排布,以及border-left的样式,就可以确定它是占坑的,6位密码,6个<i>,这个很明显,咱继续

 

接下来是<span>,这里注意个细节,这个span的visibility属性为hidden,那咱先跳过,待会再说它是干嘛的

4

 

第二步:

到这里可能就有点好奇了,不是密码输入框么,这里面的每个元素都不像是干这事的呀。

到这一步,可以说这些元素确实都跟“输入密码”没啥关系,那么,真正的密码输入到哪去了?

 

来,咱回到刚刚那个class为“sixDigitPassword”的地方,看看它的父元素

5

 

喏,这下似乎越来越能想明白密码到哪去了。黄色箭头所指的就是span#payPassword_container的子元素,换个姿势理一下元素的父子关系

6

 

好嘛,input这不是来了么,那input#payPassword_rsainput和div.sixDigitPassword到底是怎么工作的呢。

接下来是正片。

 

第三步:

先对这个input进行一些样式和属性上的魔改,让它显出来

7

 

 

实际上呢,整个密码输入过程的核心还是个input,为什么这么说呢,

div.sixDigitPassword实际上只是把整个过程用体验更好的方式和过程描绘了出来

 

在来一番魔改

8

wtf???

 

 

于是呢,实际实现方式是这样的(逻辑部分涉及脑补混淆js懒得去看了):

当名为:sixDigitPassword的div被点击的时候,

让名为:payPassword_rsainput的input获得焦点

同时初始化sixDigitPassword的显示部分

 

而sixDigitPassword>i>b实际上就是你看到的那个“黑疙瘩”,

9

这里的“黑疙瘩”也不是真正的黑疙瘩,而是一个background-image。

也就是说,控制<b>的visibility就可以控制这6个密码输入到第几位了

如果input里有4个字符,那就把从1-4里的每一个i的b的invisible:hidden取消掉

 

 

sixDigitPassword>i.active就是你看到的那个“光标”,为什么是加引号的光标呢,因为实际上它不是光标

10

它也是一个background-image,并且这个background-image是gif,于是这就让你有了“input”的感觉

 

还记得我们在第一步中提到的那个visibility为hidden的那个span么

11

正是它控制的box-shadow让你感觉到当前的那个位置更像input,控制它的left来达到在6个密码之间移动的效果

 

相关文章

1 个评论
来吐个槽(ノ*・ω・)ノ)