效果展示：
直接上代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> input{ width:800px; } </style> </head> <body> <input id="card" type="text" placeholder="請輸入銀行卡號"> <input id="phone" type="text" placeholder="請輸入銀行卡號"> <script> var cardInput = document.getElementById('card'); var phoneInput = document.getElementById('phone'); //模擬數據 var str = '6228480402564890018'; var phone = '13367678989'; //銀行卡號過濾 function stringHidePart(strObj){ var strLength = strObj.length; var star = ''; var strRel = ''; if(strLength>6){ var hideSec = strObj.substring(3); //星號部分 for(var i=7;i<hideSec.length;i++){ star+= "*"; } }; strRel = strObj.substring(0,6) + star + strObj.substr(strObj.length-4); // strRel=strRel.replace(/\s/g,'').replace(/(.{4})/g,"$1 "); return strRel; }; //銀行卡號過濾 function stringHidePart2(strObj){ var strLength = strObj.length; var star = ''; var strRel = ''; if(strLength>3){ var hideSec = strObj.substring(3); //星號部分 for(var i=4;i<hideSec.length;i++){ star+= "*"; } }; strRel = strObj.substring(0,3) + star + strObj.substr(strObj.length-4); // strRel=strRel.replace(/\s/g,'').replace(/(.{4})/g,"$1 "); return strRel; }; window.onload = function(){ // 判斷后台數據是否存在 if(str.length>0){ cardInput.value = stringHidePart(str); cardInput.setAttribute('disabled','disabled') }else{ //用戶輸入 } if(phone.length>0){ phoneInput.value= stringHidePart2(phone); phoneInput.setAttribute('disabled','disabled') }else{ //用戶輸入 } } </script> </body> </html>