摘要：踩的大坑前言最近有個(gè)需求要將全平臺(tái)的交易密碼由原來(lái)的位復(fù)雜密碼改為位純數(shù)字交易密碼，涉及到非常多的業(yè)務(wù)場(chǎng)景，但修改起來(lái)也無(wú)非兩種設(shè)置交易密碼，使用交易密碼設(shè)置交易密碼普通長(zhǎng)條輸入框彈起數(shù)字鍵盤支持明暗文切換查看使用交易密碼顯示六個(gè)格子彈起

前言：最近有個(gè)需求要將全平臺(tái)的交易密碼由原來(lái)的 6-16位 復(fù)雜密碼改為6位純數(shù)字交易密碼，涉及到非常多的業(yè)務(wù)場(chǎng)景，但修改起來(lái)也無(wú)非兩種：設(shè)置交易密碼，使用交易密碼

設(shè)置交易密碼： 普通長(zhǎng)條輸入框、彈起數(shù)字鍵盤、支持明暗文切換查看

使用交易密碼： 顯示六個(gè)格子、彈起數(shù)字鍵盤

要求彈起數(shù)字鍵盤，maxlength=6 ，支持明暗文交換

由于 type=password 不能調(diào)起數(shù)字鍵盤，還想展示暗文，于是找到了一個(gè)css 屬性 -webkit-text-security: disc; 可以將input里面的內(nèi)容展示位 ???；所以明暗文切換，就變成了動(dòng)態(tài)添加這個(gè)樣式， 然后用 type=tel 調(diào)起數(shù)字鍵盤，maxlength=6 控制長(zhǎng)度，在安卓機(jī)上完美運(yùn)行，符合預(yù)期

ios 上就炸窩了，當(dāng)首次用暗文輸入時(shí)，輸完之后切換明文的時(shí)候（即去掉上述樣式），結(jié)果出現(xiàn)了下圖詭異的情況

只有最后輸入的一個(gè)數(shù)字被切換成了明文，其他的還是暗文，當(dāng)首次輸入明文的時(shí)候，進(jìn)行明暗文切換卻是沒問題的（這充分說(shuō)明 ios -webkit-text-security: disc; 對(duì)這個(gè)樣式支持的不太好）

中間享用div模擬個(gè)輸入框呢，最后寫了半天發(fā)現(xiàn)光標(biāo)不好模擬，于是就放棄了

最終解決辦法：對(duì) ios 和安卓分別處理

判斷瀏覽器設(shè)備ua
安卓：樣式 + type=tel + maxlength=6
ios: type=tel + type=password + pattern=[0-9]* 

pattern=[0-9]*  : 這個(gè)是用來(lái)ios環(huán)境下 在 type=password 的情況下調(diào)起數(shù)字鍵盤，但這個(gè)東西卻在安卓上不起作用 

調(diào)起數(shù)字鍵盤，安卓ios分開處理的原因

更多 pattern 知識(shí)請(qǐng)參看 pattern

數(shù)字的驗(yàn)證有兩個(gè)：

  
  
對(duì)表單驗(yàn)證來(lái)說(shuō)，這兩個(gè)正則的作用是一樣的，表現(xiàn)的話差異就很大：

iOS中，只有[0-9]*才可以調(diào)起九宮格數(shù)字鍵盤，d 無(wú)效
Android 4.4以下(包括X5內(nèi)核)，兩者都調(diào)起數(shù)字鍵盤；
Android 4.4.4以上，只認(rèn) type 屬性，也就是說(shuō)，如果上面的代碼將 type="number" 改為 type="text" ，將調(diào)起全鍵盤而不會(huì)是九宮格數(shù)字鍵盤。

在寫的過程中又碰到了另外一個(gè)問題，剛開始處理 ios 的時(shí)候?qū)懙氖?type=number + maxlength=6, 這個(gè)時(shí)候發(fā)現(xiàn)當(dāng)number的時(shí)候，maxlength 試不起作用的，我累個(gè)草

請(qǐng)參照 type=number maxlength不起作用

代碼方案：
一個(gè) input 設(shè)置成透明、邊框去掉、顏色去掉，下面放一個(gè)div，兩個(gè)位置重合
當(dāng)input focus 的時(shí)候，給 div設(shè)置個(gè)邊框，相當(dāng)于input聚焦時(shí)的高亮展示，blur 的時(shí)候去掉這個(gè)邊框


    
    

        

        

        

        

        

        

    

.pwd-input {
    width: 300%;
    height: 4.4rem;
    color: transparent;
    position: absolute;
    top: 0;
    left: -200%;
    border: none;
    font-size: 18px;
    opacity: 0;
    z-index: 1;
}
.fake-box .pwd-dot {
    display: inline-block;
    width: 16.66%;
    height: 4.4rem;
    color: #13334D;
    border: none;
    border-right: 1px solid #D8E2E9;
    text-align: center;
    vertical-align: top;
    background: #ffffff;
}
.dot {
    margin: 1.6rem 0;
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: #13334D;
}

完美實(shí)現(xiàn)效果，其實(shí)剛開始我的 input： width:100%; left:0 是這樣寫的，這個(gè)時(shí)候 安卓是完美運(yùn)行，ios卻又炸窩了，ios上的 input 光標(biāo)還是一閃一閃的在那里堅(jiān)挺的站立著，真是頭大，怎么ios上的問題比安卓上還多啊

哭死冥想：有高人指點(diǎn)，input 只負(fù)責(zé)接收事件，并不用來(lái)展示，所以可以將 input的寬度設(shè)置為 300%； left：-200%； 將其光標(biāo)位置移出屏幕外，這樣真是完美解決問題啊

其實(shí)剛開始，這個(gè)六個(gè)格子的是別人提供的現(xiàn)成的 react 組件，但有個(gè)老系統(tǒng)沒法用react，所以自己就照著組件寫了一個(gè)類似的東西，剛開始看不懂 為什么要把 width:300%; left:-200% 心里還狠狠的把寫組件的人嘲笑了一番，最后才發(fā)現(xiàn)自己是 too young too simple