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
本文轉載於:猿2048→https://www.mk2048.com/blog/blog_hccbkjbib0j.html