京東淘寶的密碼輸入框功能點(diǎn)

實(shí)現(xiàn)思路

1、寫好6位密碼輸入框的靜態(tài)樣式和html結(jié)構(gòu)
2、將密碼輸入框input定位到父容器，覆蓋之前寫好的6位密碼輸入框區(qū)域，并設(shè)置為透明
3、雖然設(shè)置了密碼輸入框?yàn)橥该鳎?dāng)密碼輸入框獲得焦點(diǎn)的時(shí)候，輸入框的光標(biāo)會(huì)顯示出來，并不是透明狀態(tài)。為了解決這個(gè)問題，暫時(shí)想到了兩種方法，第一種，利用css將光標(biāo)也設(shè)置為透明，不過這種方法有一定的兼容問題；第二種，當(dāng)輸入框獲得焦點(diǎn)的時(shí)候，將輸入框定位到屏幕外面，用戶看不到輸入框，自然也就看不到光標(biāo)在那里一閃一閃了。
4、對(duì)于用戶只能輸入數(shù)字的功能，這里用正則表達(dá)式就搞定了，如果用戶輸入了非數(shù)字字符，將input輸入框的值清空
5、對(duì)于用戶輸入超過6位字符的情況，利用字符串的截取方法截取input.value的前6位字符
6、循環(huán)遍歷圓點(diǎn)，將index小于input.value.length的圓點(diǎn)顯示出來
7、用戶輸入超過6個(gè)的數(shù)字的時(shí)候，你再去刪除，你會(huì)發(fā)現(xiàn)要?jiǎng)h除很多字符，那些小圓點(diǎn)才會(huì)相應(yīng)的消失，所以這里，將截取的6位字符賦值給input輸入框的值，讓input.value長(zhǎng)度永遠(yuǎn)小于等于6

HTML結(jié)構(gòu)

父容器 input-ps 用于input輸入框的定位
一位密碼對(duì)應(yīng)一個(gè)input-ps-item和dot

<div class="input-ps">  <div class="input-ps-item">    <span class="dot"></span> //小圓點(diǎn)  </div>  <div class="input-ps-item">    <span class="dot"></span>  </div>  <div class="input-ps-item">    <span class="dot"></span>  </div>  <div class="input-ps-item">    <span class="dot"></span>  </div>  <div class="input-ps-item">    <span class="dot"></span>  </div>  <div class="input-ps-item last">    <span class="dot"></span>  </div>  <input id="input-mima" class="input-mima" type="text"/></div>

CSS樣式

css樣式自己定義就行，想要什么樣式自己寫～～～注意幾個(gè)關(guān)鍵點(diǎn)

dot初始狀態(tài)為隱藏狀態(tài)
input輸入框?yàn)榻^對(duì)定位，覆蓋在6個(gè)密碼塊上，設(shè)置為透明

.input-ps{  position: relative;  display: flex;  align-items: center;  width: 8.28125rem;  height: 1.375rem;  margin: 0 auto;  border: 1px solid #d9d9d9;  border-radius: 0.1875rem;  background-color: #fff;}.input-ps-item{  display: flex;  justify-content: space-around;  align-items: center;  flex: 1;  height: 0.78125rem;  border-right: 1px solid #d9d9d9;}.last{  border: none;}.dot{  display: none;  width: 0.234375rem;  height: 0.234375rem;  border-radius: 0.234375rem;  background-color: #363e49;}.input-mima{  position: absolute;  left: 0;  top: 0;  height: 1.375rem !important;  color: transparent;  opacity: 0;}