開發有時候會遇到輸入手機號和銀行卡號，按照每4位顯示一個空格的需求，方便用戶閱讀，如果是純展示，就很容易實現，如果是一邊輸入一邊展示則有點難度
有人用兩個input實現，一個負責輸入數據，但是透明看不見，另外一個展示在界面上，變相的解決了這個需求（手機上可調用數字鍵盤）
本次取巧寫個demo，只用一個input用定時器不斷的查詢輸入的字符來判斷輸入的數據（無法直接調用數字鍵盤，因為里邊有空格）
如果是銀行卡號，將字符判斷長度更改為，也可以根據實際需求來判斷長度
lastLen === 5 || lastLen === 10 || lastLen === 15|| lastLen === 20
話不多說，上代碼
js;"><!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'); //定義兩個緩存值 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個空格 //用戶輸入滿11位開始驗證 if(telphone.value.length==13){ //將數據去掉空格后驗證 if(!re.test(telphone.value.replace(//s/g, ''))){ err.innerHTML='手機號碼有誤' } 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);//如果手機出現卡頓，可適當把定時器時間加大 }</script></body></html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
