input 彈起數字鍵盤的那些坑

input ios 踩的大坑

前言：最近有個需求要將全平臺的交易密碼由原來的 6-16位 複雜密碼改成6位純數字交易密碼，涉及到很是多的業務場景，但修改起來也無非兩種：設置交易密碼，使用交易密碼

• 設置交易密碼： 普通長條輸入框、彈起數字鍵盤、支持明暗文切換查看
• 使用交易密碼： 顯示六個格子、彈起數字鍵盤

先來講說第一種，設置交易密碼

• 
• 要求彈起數字鍵盤，maxlength=6 ，支持明暗文交換
• 因爲 type=password 不能調起數字鍵盤，還想展現暗文，因而找到了一個css 屬性 -webkit-text-security: disc; 能夠將input裏面的內容展現位 •••；因此明暗文切換，就變成了動態添加這個樣式， 而後用 type=tel 調起數字鍵盤，maxlength=6 控制長度，在安卓機上完美運行，符合預期
• ios 上就炸窩了，當首次用暗文輸入時，輸完以後切換明文的時候（即去掉上述樣式），結果出現了下圖詭異的狀況

• 只有最後輸入的一個數字被切換成了明文，其餘的仍是暗文，當首次輸入明文的時候，進行明暗文切換倒是沒問題的（這充分說明 ios -webkit-text-security: disc; 對這個樣式支持的不太好）
• 中間享用div模擬個輸入框呢，最後寫了半天發現光標很差模擬，因而就放棄了
• 最終解決辦法：對 ios 和安卓分別處理

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

pattern=[0-9]*  : 這個是用來ios環境下 在 type=password 的狀況下調起數字鍵盤，但這個東西卻在安卓上不起做用

調起數字鍵盤，安卓ios分開處理的緣由

• 更多 pattern 知識請參看 pattern

數字的驗證有兩個：

<input type="number" pattern="\d">  
<input type="number" pattern="[0-9]*">  
對錶單驗證來講，這兩個正則的做用是同樣的，表現的話差別就很大：

iOS中，只有[0-9]*才能夠調起九宮格數字鍵盤，\d 無效
Android 4.4如下(包括X5內核)，二者都調起數字鍵盤；
Android 4.4.4以上，只認 type 屬性，也就是說，若是上面的代碼將 type="number" 改成 type="text" ，將調起全鍵盤而不會是九宮格數字鍵盤。

• 在寫的過程當中又碰到了另一個問題，剛開始處理 ios 的時候寫的是 type=number + maxlength=6, 這個時候發現當number的時候，maxlength 試不起做用的，我累個草
• 請參照 type=number maxlength不起做用

第二種狀況 使用交易密碼

• 

代碼方案：
一個 input 設置成透明、邊框去掉、顏色去掉，下面放一個div，兩個位置重合
當input focus 的時候，給 div設置個邊框，至關於input聚焦時的高亮展現，blur 的時候去掉這個邊框

<div>
    <input type="tel" pattern="[0-9]*" maxlength="6" class="pwd-input">
    <div class="fake-box">
        <div class="pwd-dot"><span class="dot"></span></div>
        <div class="pwd-dot"><span class="dot"></span></div>
        <div class="pwd-dot"><span class="dot"></span></div>
        <div class="pwd-dot"><span class=""></span></div>
        <div class="pwd-dot"><span class=""></span></div>
        <div class="pwd-dot"><span class=""></span></div>
    </div>
</div>
.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;
}

• 完美實現效果，其實剛開始個人 input： width:100%; left:0 是這樣寫的，這個時候 安卓是完美運行，ios卻又炸窩了，ios上的 input 光標仍是一閃一閃的在那裏堅挺的站立着，真是頭大，怎麼ios上的問題比安卓上還多啊
• 哭死冥想：有高人指點，input 只負責接收事件，並不用來展現，因此能夠將 input的寬度設置爲 300%； left：-200%； 將其光標位置移出屏幕外，這樣真是完美解決問題啊

其實剛開始，這個六個格子的是別人提供的現成的 react 組件，但有個老系統無法用react，因此本身就照着組件寫了一個相似的東西，剛開始看不懂 爲何要把 width:300%; left:-200% 內心還狠狠的把寫組件的人嘲笑了一番，最後才發現本身是 too young too simple