js实现模拟银行卡账号输入显示效果
作者:mile 时间:2024-04-16 09:13:35
本文实例讲述了js实现模拟银行卡账号输入显示效果。分享给大家供大家参考,具体如下:
先来看运行效果截图如下:
在线演示地址如下:
http://demo.aspxhome.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); /*帐号的总数, 包括空格在内 */
if (account.match (".[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}") == null)
{
/* 对照格式 */
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++)
{ /* 可将以下空格改为-,效果也不错 */
if (i == 4) account = account + "-"; /* 帐号第四位数后加空格 */
if (i == 8) account = account + "-"; /* 帐号第八位数后加空格 */
if (i == 12) account = account + "-";/* 帐号第十二位后数后加空格 */
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>
只能输入数字,并且每输入4位数字会增加一个 - <br />
<input type="text" value="" size="25" onkeyup="www_jb51_net(this)" onkeydown="www_jb51_net(this)" name="account" id="account">
希望本文所述对大家JavaScript程序设计有所帮助。
标签:js,模拟
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Python基于jieba分词实现snownlp情感分析
2023-11-14 21:43:38
![](https://img.aspxhome.com/file/2023/0/63590_0s.jpg)
对tensorflow中cifar-10文档的Read操作详解
2022-08-10 06:59:10
![](https://img.aspxhome.com/file/2023/0/92330_0s.gif)
debian6配置mysql允许远程连接的方法(图)
2024-01-13 19:42:20
![](https://img.aspxhome.com/file/2023/9/99359_0s.png)
Linux下安装Memcached服务器和客户端与PHP使用示例
2023-10-05 04:32:44
![](https://img.aspxhome.com/file/2023/8/85818_0s.png)
带你快速了解SQL窗口函数
2024-01-27 19:11:38
![](https://img.aspxhome.com/file/2023/4/118214_0s.jpg)
python ipset管理 增删白名单的方法
2021-02-10 17:38:19
python 显示数组全部元素的方法
2021-03-20 13:15:01
Python Flask微信小程序登录流程及登录api实现代码
2022-03-21 14:33:47
![](https://img.aspxhome.com/file/2023/4/133254_0s.gif)
详解webpack3编译兼容IE8的正确姿势
2024-02-26 23:18:17
Python/Django后端使用PIL Image生成头像缩略图
2021-12-18 09:46:27
python图形界面tkinter的使用技巧
2022-04-24 01:34:22
![](https://img.aspxhome.com/file/2023/5/85195_0s.png)
php bootstrap实现简单登录
2024-04-10 10:42:07
![](https://img.aspxhome.com/file/2023/8/137008_0s.png)
python pandas分组聚合详细
2022-01-27 22:21:44
Python设计模式编程中Adapter适配器模式的使用实例
2023-11-16 10:02:15
![](https://img.aspxhome.com/file/2023/4/134604_0s.jpg)
邮箱正则表达式实现代码(针对php)
2024-05-03 15:48:55
css设计小巧三条
2008-01-21 13:04:00
python为什么会环境变量设置不成功
2023-01-18 04:33:08
![](https://img.aspxhome.com/file/2023/7/113127_0s.jpg)
Python使用eval函数执行动态标表达式过程详解
2022-05-29 07:03:30
Python数据预处理时缺失值的不同处理方式总结
2022-02-14 22:58:25
![](https://img.aspxhome.com/file/2023/6/99096_0s.png)
Python 高效编程技巧分享
2022-12-13 10:23:43