Posted in Javascript onDecember 19, 2016
1、原生js写法
!function () { document.getElementById('bankCard').onkeyup = function (event) { var v = this.value; if(/\S{5}/.test(v)){ this.value = v.replace(/\s/g, '').replace(/(.{4})/g, "$1 "); } }; }();
2、jQuery写法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text" id="J_BankCard"/> <script src="http://static.ydcss.com/libs/jquery/1.11.2/jquery.js"></script> <script> !function () { $('#J_BankCard').on('keyup mouseout input',function(){ var $this = $(this), v = $this.val(); /\S{5}/.test(v) && $this.val(v.replace(/\s/g,'').replace(/(.{4})/g, "$1 ")); }); }(); </script> </body> </html>
输入银行卡号,每隔4位数字加一个空格(小细节)
document.getElementById('bankCardInp').onkeyup = function (event) { var v = this.value; console.log(/\S{5}/.test(v)); console.log(v); if(/\S{5}/.test(v)){ this.value = v.replace(/\s/g, '').replace(/(.{4})/g, '$1 '); } };
小编前段时间自己做了个小项目,用到正则,刚好百度了一下,诧异的发现输入银行卡号每隔4位数字加一个空格 居然全部都是清一色的一坨代码,上面大家估计都能理解,当然我整体也能理解: 问题来了
if(/\S{5}/.test(v)){正确执行}
不知道大家有没注意到,反正我是困惑到了一开始, /\S{5}/.test(v) 要为 true 才执行,刚开始以为必须5个空字符以上才执行,
尤为不解,但是认真看了下, \S 居然是大写,我大约知道原因了,我相信大家像我一样一般常用都用 \d \w \s 这些小写的
\D \W \S 大写我还真没用过或许我的能力原因吧, \S 是除了空字符 那上面的代码就海阔天空了。
银行卡号每隔4位插入空格 (再用户填写银行卡号的时候挺有用的) IE9+
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>银行卡号4位空格</title> <script src="http://j2.58cdn.com.cn/js/jquery-1.8.3.js"></script> </head> <body> <input type="text" id="kahao" /> <script> $(function() { $('#kahao').on('keyup', function(e) { //只对输入数字时进行处理 if((e.which >= 48 && e.which <= 57) || (e.which >= 96 && e.which <= 105 )){ //获取当前光标的位置 var caret = this.selectionStart //获取当前的value var value = this.value //从左边沿到坐标之间的空格数 var sp = (value.slice(0, caret).match(/\s/g) || []).length //去掉所有空格 var nospace = value.replace(/\s/g, '') //重新插入空格 var curVal = this.value = nospace.replace(/(\d{4})/g, "$1 ").trim() //从左边沿到原坐标之间的空格数 var curSp = (curVal.slice(0, caret).match(/\s/g) || []).length //修正光标位置 this.selectionEnd = this.selectionStart = caret + curSp - sp } }) }) </script> </body> </html>
支付宝为了兼容 和 易用性, 是在悬浮一个提示框分开卡号的, 这种也比较容易实现
以上所述是小编给大家介绍的JS填写银行卡号每隔4位数字加一个空格,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
JS填写银行卡号每隔4位数字加一个空格
- Author -
wxwx123声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@