亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

input 彈起數(shù)字鍵盤的那些坑

imccl / 1593人閱讀

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

input ios 踩的大坑 
前言：最近有個需求要將全平臺的交易密碼由原來的 6-16位 復雜密碼改為6位純數(shù)字交易密碼，涉及到非常多的業(yè)務場景，但修改起來也無非兩種：設(shè)置交易密碼，使用交易密碼

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

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

先來說說第一種，設(shè)置交易密碼

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

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

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

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

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

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

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

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

更多 pattern 知識請參看 pattern 

數(shù)字的驗證有兩個：

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

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

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

請參照 type=number maxlength不起作用

第二種情況 使用交易密碼 

代碼方案：
一個 input 設(shè)置成透明、邊框去掉、顏色去掉，下面放一個div，兩個位置重合
當input focus 的時候，給 div設(shè)置個邊框，相當于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;
}

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/115854.html

相關(guān)文章

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

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

    stackvoid 評論0 收藏0

  • angularjs學習筆記—事件指令

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

    Lemon_95 評論0 收藏0

  • iphone 軟鍵盤彈起，禁止頁面整體往上滾動

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

    marek 評論0 收藏0

發(fā)表評論

0條評論

imccl

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<