本文實(shí)例講述了js實(shí)現(xiàn)模擬銀行卡賬號(hào)輸入顯示效果。分享給大家供大家參考,具體如下:
先來(lái)看運(yùn)行效果截圖如下:

在線演示地址如下:
http://demo.VeVB.COm/js/2015/js-mn-bank-card-input-style-codes/
具體代碼如下:
<script language="javascript" type="text/javascript">function www_jb51_net (BankNo){if (BankNo.value == "") return;var account = new String (BankNo.value);account = account.substring(0,22); /*帳號(hào)的總數(shù), 包括空格在內(nèi) */if (account.match (".[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}") == null){/* 對(duì)照格式 */if (account.match (".[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}|" + ".[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}|" +".[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}|" + ".[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}") == null){var accountNumeric = accountChar = "", i;for (i=0;i<account.length;i++){accountChar = account.substr (i,1);if (!isNaN (accountChar) && (accountChar != " ")) accountNumeric = accountNumeric + accountChar;}account = "";for (i=0;i<accountNumeric.length;i++){ /* 可將以下空格改為-,效果也不錯(cuò) */if (i == 4) account = account + "-"; /* 帳號(hào)第四位數(shù)后加空格 */if (i == 8) account = account + "-"; /* 帳號(hào)第八位數(shù)后加空格 */if (i == 12) account = account + "-";/* 帳號(hào)第十二位后數(shù)后加空格 */account = account + accountNumeric.substr (i,1)}}}else{account = " " + account.substring (1,5) + " " + account.substring (6,10) + " " + account.substring (14,18) + "-" + account.substring(18,25);}if (account != BankNo.value) BankNo.value = account;}function checkBankNo (BankNo){if (BankNo.value == "") return;if (BankNo.value.match (".[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}") == null){if (BankNo.value.match ("[0-9]{19}") != null)www_jb51_net (BankNo)}}function checkEnterForFindListing(e){var characterCode;if(e && e.which){e = e;characterCode = e.which ;}else{e = event;characterCode = e.keyCode;}if(characterCode == 22){document.forms[getNetuiTagName("findListingForm")].submit();return false;}else{return true ;}}</script>只能輸入數(shù)字,并且每輸入4位數(shù)字會(huì)增加一個(gè) - <br /><input type="text" value="" size="25" onkeyup="www_jb51_net(this)" onkeydown="www_jb51_net(this)" name="account" id="account">希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注