開發(fā)有時(shí)候會(huì)遇到輸入手機(jī)號和銀行卡號，按照每4位顯示一個(gè)空格的需求，方便用戶閱讀，如果是純展示，就很容易實(shí)現(xiàn)，如果是一邊輸入一邊展示則有點(diǎn)難度
有人用兩個(gè)input實(shí)現(xiàn)，一個(gè)負(fù)責(zé)輸入數(shù)據(jù)，但是透明看不見，另外一個(gè)展示在界面上，變相的解決了這個(gè)需求（手機(jī)上可調(diào)用數(shù)字鍵盤）
本次取巧寫個(gè)demo，只用一個(gè)input用定時(shí)器不斷的查詢輸入的字符來判斷輸入的數(shù)據(jù)（無法直接調(diào)用數(shù)字鍵盤，因?yàn)槔镞呌锌崭瘢?/p>
如果是銀行卡號，將字符判斷長度更改為，也可以根據(jù)實(shí)際需求來判斷長度
lastLen === 5 || lastLen === 10 || lastLen === 15|| lastLen === 20
話不多說，上代碼
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="renderer" content="webkit"> <title>Title</title></head><body><input type="text" id="telphone"><span id="err"></span><script> var telphone = document.getElementById('telphone'); var err = document.getElementById('err'); //定義兩個(gè)緩存值 var firstLen = 0; var lastLen = 0; var re=/^1(3|4|5|7|8)/d{9}$/; telphone.oninput = function () { telphone.value = telphone.value.substr(0, 13);//只允許輸入11位+2個(gè)空格 //用戶輸入滿11位開始驗(yàn)證 if(telphone.value.length==13){ //將數(shù)據(jù)去掉空格后驗(yàn)證 if(!re.test(telphone.value.replace(//s/g, ''))){ err.innerHTML='手機(jī)號碼有誤' } else{ err.innerHTML='' } }else{ err.innerHTML='' } } telphone.onfocus = function () { timer = setInterval(function () { lastLen = telphone.value.length; if (lastLen > firstLen) { firstLen = telphone.value.length; if (lastLen === 4 || lastLen === 9) { var temp1 = telphone.value.substr(0, telphone.value.length - 1); var temp2 = telphone.value.substr(telphone.value.length - 1); telphone.value = temp1 + ' ' + temp2; } } else if (lastLen <= firstLen) { if (lastLen === 4 || lastLen === 9) { telphone.value = telphone.value.substr(0, telphone.value.length - 1); } firstLen = telphone.value.length; } }, 10);//如果手機(jī)出現(xiàn)卡頓，可適當(dāng)把定時(shí)器時(shí)間加大 }</script></body></html>以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
