追求卓越一諾千金

藍藍設計-总决赛热火vs雷霆,2011年成立-||裤子尺寸换算,主創清華團隊__|106官方彩票平台,專注軟件和互聯網ui設計開發_易乳宝官网。擅長企業信息化管理--|078彩票软件安全吗、監控|_|35彩票35cpcc、大數據軟件UIUE谘詢和設計開發服務|_-众赢彩票pk10。立足UI_|觅血者斯基尔,好好學習_|_阿斯蒂芬规划局快乐,天天進步||_殷世航一个月赚多少钱!


移動端 驗證碼/密碼 輸入框實現--安卓/ios適用

2019-7-16 釋然 前端及開發文章及欣賞


如果您想訂閱本博客內容|若奥穆蒂尼奥,每天自動發到您的郵箱中|_|苯胺的密度, 請點這裏

先貼圖|英塔吉,需要實現的效果是這樣的__亿彩彩票规律。



實現思路有兩個_淘宝股票代码:

 

1--盈彩网计划、用6個input--影印一体机,輸入一個數字後將focus給下一個輸入框_中央4台。

2_-苇塘、用一個input和6個span|_-风险看吧,input隱藏_-魔龙辅助官网,用span顯示-_疥舒宁多少钱一盒。

 

現在大部分都是使用的第二種方法|-框架尺寸。(當然-__1吨水多少立方米,如果你能說服產品也可以隻用一個普通的input輸入框|铁路狂奔,就什麼都不用考慮了)

 

兩種方案遇到的坑|__众博国际app下载,以及優缺點|-|打吊针原曲,如下|__2628彩票是正规平台吗:

 

方案一__许宗衡简历:6個input|_众盈网彩票安全吗。

 

主要就是用js切換focus||黑车交易市场,在安卓是相當流暢的-|_应用文写作范文,但是在ios會嚴重卡頓-_168彩票网是不是黑彩,簡直逼死強迫症___三中三规律。

 

HTML_--银彩娱乐app:

<div class="divYZM">
    <!-- onpropertychange是為了避免在ios中oninput方法不被觸發 -->
    <input id="check_1" class="numDiv" type="number" oninput="inputNext(check_1)" onpropertychange="inputNext(check_1)"/>
    <input id="check_2" class="numDiv" type="number" oninput="inputNext(check_2)" onpropertychange="inputNext(check_2)"/>
    <input id="check_3" class="numDiv" type="number" oninput="inputNext(check_3)" onpropertychange="inputNext(check_3)"/>
    <input id="check_4" class="numDiv" type="number" oninput="inputNext(check_4)" onpropertychange="inputNext(check_4)"/>
    <input id="check_5" class="numDiv" type="number" oninput="inputNext(check_5)" onpropertychange="inputNext(check_5)"/>
    <input id="check_6" class="numDiv" type="number" oninput="inputNext(check_6)" onpropertychange="inputNext(check_6)"/>
</div>
JS__-1288彩票正规吗:

function inputNext (id){ // 傳過來的id是個對象
    var index = Number(id.id.split("_")[1])
    if (id.value.length < 1) { // 刪除
        id.value = ''
        if (index > 1) {
            var preId = 'check_' + Number(Number(index) - 1)
            document.getElementById(preId).focus()
            return false
        }
    } else {
        if(id.value.length>1) {
            var nextValue = id.value.slice(1, 2)
            var nextId = 'check_' + Number(Number(index) + 1)
            id.value = id.value.slice(0, 1)
            if ((index+1) <= 6) {
                document.getElementById(nextId).value = nextValue
                document.getElementById(nextId).focus()
            }
        }
    }
}
PS||诺尔丝假发:我這裏寫的刪除方法是有問題的|_-上海配汽车钥匙,這也是我果斷放棄這種方案的原因之一-|易彩娱乐测速。

 

如果正常輸入_|新乡爱情网,然後刪除是可以的-||重庆新任公安局长。

 

但是輸入幾個數後__鲁阁初恋,先點擊中間的框刪除一個數字--传说中勇者的传说2,再回到最後_|goxiazai cc,便隻能將中間到最後的這幾個刪掉_-248彩票真害人,最前麵的還需要手動點一下得到focus才能刪除-_|双色球71期开奖结果。

 

這對用戶來說|_07我型我秀朱晓东照片,簡直太不友好了__对子莲。_-单身公主相亲记优酷。-||永城彩票官网。

 

CSS__三中全会2014:

.divYZM{
    width: 90%;
    margin: 0 auto;
    height: 100px;
    background-color: rgba(74, 35, 35, 0.42);
}
.numDiv{
    display: block;
    width: 10%;
    float: left;
    border-radius: 5px;
    text-align: center;
    line-height: 60px;
    font-size: 20px;
    font-weight: 900;
    color: red;
    background-color: white;
    height: 60px;
    border: 0;
    padding: 0;
    margin: 0;
    margin-left: 5.7%;
    top: 20px;
    position: relative;
    caret-color: transparent;
}
這裏遇到的坑|惜春小礼阅读答案,舉例一個__苏通大桥有多长。

 

input限製長度的屬性maxlength

 

a-|钛锗手链、與如下兩種配合使用(tel也可以限製)

<input type="text">  或者
<input type="password">
 

b|-青岛台东八路洗头房、當type為number時不起作用-|炫舞今日答题答案。這時需要用js控製--_永盛彩票赢了不给钱。

<input type="number" oninput="if(value.length>5) value=value.slice(0,5)" />
注意---掌信彩导师:此外-_-熟年本理想,tel類型的input在ios上會調出全數字鍵盤_众彩彩票诈骗,而number類型的input則會調出帶有標點符號的鍵盤__至尊彩快3软件下载。

 

 

方案二|-晴儿图片:1個input和6個span|_万苏林。

 

隱藏input|5q币购物券怎么用,用span顯示內容-|_银河游戏是不是作假。大坑就是_--云购彩票,何種情況下能調起ios的軟鍵盤呢_|娱乐天地检点登录?

 

先貼一下我剛開始的input樣式__|海诗神楼。

width: 0;
height _|-160彩票网站:0|_北京黄标车报废补贴;
border: 0;
padding: 0;
margin: 0;

第二種
display:none;
 

簡單粗暴-_goodbyemissripley,結果就是||-铁将军防盗器接线图,ios木得反應|-_让胜是什么意思。為啥呢__308二四六玄机资料大全,我想不通_--易彩堂五万可以提现吗。

 

後來在晚上睡覺的時候我在想-|-移动彩票网址,我這兩種方式input都麼有占位啊--|奶妈网,那是不是占位了就可以了呢-|易旺彩票犯法吗?

 

經測果然是可以的(默默譴責自己懶了一下-__致命交易市长放过我,沒有將不隱藏input的情況|_铁通宽带影院,在手機上進行測試)_-|2019哪款app可以买足彩。

 

接下來貼正確代碼_|-尊龙新版。

 

CSS-_22彩票正规吗?:

#yzm{
    width: 0;
    border: 0;
    padding: 0;
    margin: 0;
    height: .44rem;
    position: absolute;
    outline: none;
    color: transparent;
    text-shadow: 0 0 0 transparent;
    width: 300%;
    margin-left: -100%;
}
#yzmTable {
    width: 90%;
    margin: 0 auto;
    height: 100px;
    /* border: 1px solid red; */
    background-color: rgba(74, 35, 35, 0.42);
    /* opacity: 0.1; */
}
#yzmTable span { 
    display: block;
    width: 10%;
    float: left;
    border-radius: 5px;
    text-align: center;
    line-height: 60px;
    font-size: 20px;
    font-weight: 900;
    color: red;
    background-color: white;
    height: 60px;
    margin-left: 5.7%;
    top: 20px;
    position: relative;
}
這裏對input的樣式也包括對光標的隱藏||菏泽医专贴吧,我在第一種方案中對光標未進行處理_-_你有一封信 深圳卫视,因為在看到ios的卡卡卡之後果斷放棄了第一種方案|练级网游。

 

HTML:

<input id="yzm" type="tel" maxlength="6" value="" oninput="yzmInsert()">
<div id="yzmTable">
    <span id="s_1" onclick="intoYzm(1)">&nbsp;&nbsp;</span>
    <span id="s_2" onclick="intoYzm(2)">&nbsp;&nbsp;</span>
    <span id="s_3" onclick="intoYzm(3)">&nbsp;&nbsp;</span>
    <span id="s_4" onclick="intoYzm(4)">&nbsp;&nbsp;</span>
    <span id="s_5" onclick="intoYzm(5)">&nbsp;&nbsp;</span>
    <span id="s_6" onclick="intoYzm(6)">&nbsp;&nbsp;</span>
</div>
JS:

function intoYzm(index) {
    var ele = document.getElementById("yzm")
    ele.focus()
}
 
function yzmInsert() { // input內容改變時觸發
    for (var i = 1; i <= 6; i++) {
        var nextId = 's_' + i
        document.getElementById(nextId).innerHTML = '&nbsp;&nbsp;'
    }
    var yzm = document.getElementById("yzm").value
    var yzmArr = yzm.split('');
    for (var i = 0; i < yzmArr.length; i++) {
        const num = yzmArr[i];
        var id = 's_' + Number(i + 1)
        document.getElementById(id).innerHTML = '&nbsp;' + num + '&nbsp;'
    }
}
 
// 收起軟鍵盤的方法-_娱乐天地检点苹果,點擊除了輸入框之外的其他區域就收起軟鍵盤
$('body').on('touchend', function(el) {
    if(el.target.tagName != 'SPAN') {
            $('yzm').blur()    
      }
})
 

在第二種方案中有兩個地方注意下_-1吨水多少立方米:

 

a---兰州商学院教务管理系统、在js方法中加了對全局中6個span標簽(即六個輸入框)之外區域點擊事件的監聽|-|4串1什么意思,用以收起軟鍵盤||_111彩票注册,方法如下_|_青龙寺遗址公园。

$('body').on('touchend', function(el) {
    if(el.target.tagName != 'SPAN') {
        $('yzm').blur()
    }
})
 (比較粗糙_|致富彩票网址,如果頁麵中還有別的部分就比較受影響了-__360双色球杀号投注,可以自行改進)

b-|-靓眼网、在隱藏的input中添加了onclick方法_绍兴县中心医院,如下並且在其中用了blur方法使得此輸入框失去焦點-__亿发彩票下载。為什麼這麼做呢_|海华癫痫?

<input id="yzm" type="tel" maxlength="6" value="" oninput="yzmInsert()" onclick="this.blur();">
因為此處的隱藏並非真正的隱藏|_联欢会策划,而是透明化處理--众发彩票骗局,邊框包括光標全部透明化_|-林柏欣,但實際上它還是占位的___诺基亚asha503,所以當你點擊輸入框上方空白處時_qq2011官方免费下载,仍會喚起軟鍵盤_|-阿斯蒂芬规划局快乐,就和我們之前所想的點擊輸入框之外區域就收起軟鍵盤衝突了106福利彩票。

 

因此將input自身的點擊獲取focus禁止掉||10665185是什么号码,就OK了|__5320论坛。

 

之前都是自己亂七八槽的瞎記_-|娱乐天地手机版登录,第一次寫給別人看--陈德荣任天津市委常委,經驗不足||105彩票安全吗,時間倉促|_-重生洪荒之逍遥至尊。不足之處_||大学生创业策划书,還望指正_||22选五开奖结果河南的。

 藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司||观海湾大沙滩,為期望卓越的國內外企業提供卓越的UI界麵設計__三大舰队、BS界麵設計 |11选5开奖结果查询山东、 cs界麵設計 -|-骄阳似我 19楼、 ipad界麵設計 _-李白谈爱原文、 包裝設計 _||小男孩大男孩、 圖標定製 -_|全球化的利弊、 用戶體驗 -_|吴克烈、交互設計-|_亿发国际博彩、網站建設 -|偷窥之电车痴汗、平麵設計服務---云顶娱乐打鱼可提现。


標簽: 移動端 驗證碼/密碼 輸入框實現--安卓/ios適用 « 2020 年值得關注的 9 個交互設計趨勢 | B端產品設計的6大挑戰»


訂閱Rss