2019-7-16 seo達(dá)人
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
先貼圖，需要實(shí)現(xiàn)的效果是這樣的。
實(shí)現(xiàn)思路有兩個(gè)：
1、用6個(gè)input，輸入一個(gè)數(shù)字后將focus給下一個(gè)輸入框。
2、用一個(gè)input和6個(gè)span，input隱藏，用span顯示。
現(xiàn)在大部分都是使用的第二種方法。（當(dāng)然，如果你能說服產(chǎn)品也可以只用一個(gè)普通的input輸入框，就什么都不用考慮了）
兩種方案遇到的坑，以及優(yōu)缺點(diǎn)，如下：
方案一：6個(gè)input。
主要就是用js切換focus，在安卓是相當(dāng)流暢的，但是在ios會(huì)嚴(yán)重卡頓，簡(jiǎn)直逼死強(qiáng)迫癥。
HTML：
<div class="divYZM">
<!-- onpropertychange是為了避免在ios中oninput方法不被觸發(fā) -->
<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：
function inputNext (id){ // 傳過來的id是個(gè)對(duì)象
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：我這里寫的刪除方法是有問題的，這也是我果斷放棄這種方案的原因之一。
如果正常輸入，然后刪除是可以的。
但是輸入幾個(gè)數(shù)后，先點(diǎn)擊中間的框刪除一個(gè)數(shù)字，再回到最后，便只能將中間到最后的這幾個(gè)刪掉，最前面的還需要手動(dòng)點(diǎn)一下得到focus才能刪除。
這對(duì)用戶來說，簡(jiǎn)直太不友好了。。。
CSS：
.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;
}
這里遇到的坑，舉例一個(gè)。
input限制長(zhǎng)度的屬性maxlength
a、與如下兩種配合使用（tel也可以限制）
<input type="text"> 或者
<input type="password">
b、當(dāng)type為number時(shí)不起作用。這時(shí)需要用js控制。
<input type="number" oninput="if(value.length>5) value=value.slice(0,5)" />
注意：此外，tel類型的input在ios上會(huì)調(diào)出全數(shù)字鍵盤，而number類型的input則會(huì)調(diào)出帶有標(biāo)點(diǎn)符號(hào)的鍵盤。
方案二：1個(gè)input和6個(gè)span。
隱藏input，用span顯示內(nèi)容。大坑就是，何種情況下能調(diào)起ios的軟鍵盤呢？
先貼一下我剛開始的input樣式。
width: 0;
height ：0；
border: 0;
padding: 0;
margin: 0;
第二種
display:none;
簡(jiǎn)單粗暴，結(jié)果就是，ios木得反應(yīng)。為啥呢，我想不通。
后來在晚上睡覺的時(shí)候我在想，我這兩種方式input都么有占位啊，那是不是占位了就可以了呢？
經(jīng)測(cè)果然是可以的（默默譴責(zé)自己懶了一下，沒有將不隱藏input的情況，在手機(jī)上進(jìn)行測(cè)試）。
接下來貼正確代碼。
CSS：
#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;
}
這里對(duì)input的樣式也包括對(duì)光標(biāo)的隱藏，我在第一種方案中對(duì)光標(biāo)未進(jìn)行處理，因?yàn)樵诳吹絠os的卡卡卡之后果斷放棄了第一種方案。
HTML:
<input id="yzm" type="tel" maxlength="6" value="" oninput="yzmInsert()">
<div id="yzmTable">
<span id="s_1" onclick="intoYzm(1)"> </span>
<span id="s_2" onclick="intoYzm(2)"> </span>
<span id="s_3" onclick="intoYzm(3)"> </span>
<span id="s_4" onclick="intoYzm(4)"> </span>
<span id="s_5" onclick="intoYzm(5)"> </span>
<span id="s_6" onclick="intoYzm(6)"> </span>
</div>
JS:
function intoYzm(index) {
var ele = document.getElementById("yzm")
ele.focus()
}
function yzmInsert() { // input內(nèi)容改變時(shí)觸發(fā)
for (var i = 1; i <= 6; i++) {
var nextId = 's_' + i
document.getElementById(nextId).innerHTML = ' '
}
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 = ' ' + num + ' '
}
}
// 收起軟鍵盤的方法，點(diǎn)擊除了輸入框之外的其他區(qū)域就收起軟鍵盤
$('body').on('touchend', function(el) {
if(el.target.tagName != 'SPAN') {
$('yzm').blur()
}
})
在第二種方案中有兩個(gè)地方注意下：
a、在js方法中加了對(duì)全局中6個(gè)span標(biāo)簽（即六個(gè)輸入框）之外區(qū)域點(diǎn)擊事件的監(jiān)聽，用以收起軟鍵盤，方法如下。
$('body').on('touchend', function(el) {
if(el.target.tagName != 'SPAN') {
$('yzm').blur()
}
})
（比較粗糙，如果頁面中還有別的部分就比較受影響了，可以自行改進(jìn)）
b、在隱藏的input中添加了onclick方法，如下并且在其中用了blur方法使得此輸入框失去焦點(diǎn)。為什么這么做呢？
<input id="yzm" type="tel" maxlength="6" value="" oninput="yzmInsert()" onclick="this.blur();">
因?yàn)榇颂幍碾[藏并非真正的隱藏，而是透明化處理，邊框包括光標(biāo)全部透明化，但實(shí)際上它還是占位的，所以當(dāng)你點(diǎn)擊輸入框上方空白處時(shí)，仍會(huì)喚起軟鍵盤，就和我們之前所想的點(diǎn)擊輸入框之外區(qū)域就收起軟鍵盤沖突了。
因此將input自身的點(diǎn)擊獲取focus禁止掉，就OK了。
之前都是自己亂七八槽的瞎記，第一次寫給別人看，經(jīng)驗(yàn)不足，時(shí)間倉(cāng)促。不足之處，還望指正。
藍(lán)藍(lán)設(shè)計(jì)( www.izc.net.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.izc.net.cn