input 彈起數字鍵盤的那些坑

imccl 發布于2019-08-30 14:12 / 1763人閱讀

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

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

數字的驗證有兩個：

  
  
對表單驗證來說，這兩個正則的作用是一樣的，表現的話差異就很大：

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 的時候去掉這個邊框


    
    
        
        
        
        
        
        
    

.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

GPU云服務器云服務器 jsp 鍵盤彈起事件數字鍵盤自定義數字鍵盤 java鍵盤讀取數字

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.hztianpu.com/yun/115854.html

可能這些是你想要的H5軟鍵盤兼容方案

摘要：然而，并沒有直接監聽軟鍵盤的原生事件，只能通過軟鍵盤彈起或收起，引發頁面其他方面的表現間接監聽，曲線救國。軟鍵盤收起表現觸發輸入框以外的區域時，輸入框失去焦點，軟鍵盤收起。可以讓軟鍵盤彈起后，讓焦點元素再次滾到可視區，強迫滾到位。前言最近一段時間在做 H5 聊天項目，踩過其中一大坑：輸入框獲取焦點，軟鍵盤彈起，要求輸入框吸附（或頂）在輸入法框上。需求很明確，看似很簡單，其實不然。從...

stackvoid 2019-08-23 17:05 評論0 收藏0
angularjs學習筆記—事件指令

摘要：適用標簽所有觸發條件單擊適用標簽所有觸發條件雙擊適用標簽觸發條件失去焦點適用標簽觸發條件獲取焦點適用標簽觸發條件更新輸入框的內容改變并不代表的值更新。如果按一個鍵很久才松開，發生的事件為。 ngClick 適用標簽：所有觸發條件：單擊 #html click me click me #script angular.module(learnModule, []) ...

Lemon_95 2019-08-21 10:28 評論0 收藏0
iphone 軟鍵盤彈起，禁止頁面整體往上滾動

摘要：最近在做一個移動端的項目，底部的輸入框獲得焦點時，軟鍵盤彈起，在手機上火把頁面整個卷走，只看到頁面的下半部分。最近在做一個移動端的項目，底部的輸入框獲得焦點時，軟鍵盤彈起，在IOS手機上火把頁面整個卷走，只看到頁面的下半部分。首先經過反復調試，找到兩條重要線索： 1、先找到鍵盤彈起時頁面中會改變的值：測試軟鍵盤彈起時的正文全文高度、可見區域高度、文檔顯示高度、被卷去的高度這...

marek 2019-08-23 13:51 評論0 收藏0