快捷導(dǎo)航

JS填寫(xiě)銀行卡號(hào)每隔4位數(shù)字加一個(gè)空格

更新時(shí)間：2016年12月19日 09:00:32 作者：wxwx123

這篇文章主要介紹了JS填寫(xiě)銀行卡號(hào)每隔4位數(shù)字加一個(gè)空格的相關(guān)資料,需要的朋友可以參考下

1、原生js寫(xiě)法

!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寫(xiě)法

<!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>

輸入銀行卡號(hào)，每隔4位數(shù)字加一個(gè)空格（小細(xì)節(jié)）

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 ');
  }
};

小編前段時(shí)間自己做了個(gè)小項(xiàng)目，用到正則，剛好百度了一下，詫異的發(fā)現(xiàn)輸入銀行卡號(hào)每隔4位數(shù)字加一個(gè)空格居然全部都是清一色的一坨代碼，上面大家估計(jì)都能理解，當(dāng)然我整體也能理解：問(wèn)題來(lái)了

if（/\S{5}/.test(v)）{正確執(zhí)行}
不知道大家有沒(méi)注意到，反正我是困惑到了一開(kāi)始， /\S{5}/.test(v) 要為 true 才執(zhí)行，剛開(kāi)始以為必須5個(gè)空字符以上才執(zhí)行，
尤為不解，但是認(rèn)真看了下， \S 居然是大寫(xiě)，我大約知道原因了，我相信大家像我一樣一般常用都用 \d \w \s 這些小寫(xiě)的
\D \W \S 大寫(xiě)我還真沒(méi)用過(guò)或許我的能力原因吧， \S 是除了空字符那上面的代碼就海闊天空了。

銀行卡號(hào)每隔4位插入空格 (再用戶(hù)填寫(xiě)銀行卡號(hào)的時(shí)候挺有用的) IE9+

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>銀行卡號(hào)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) {
       //只對(duì)輸入數(shù)字時(shí)進(jìn)行處理
        if((e.which >= 48 && e.which <= 57) ||
            (e.which >= 96 && e.which <= 105 )){
          //獲取當(dāng)前光標(biāo)的位置
          var caret = this.selectionStart
          //獲取當(dāng)前的value
          var value = this.value
          //從左邊沿到坐標(biāo)之間的空格數(shù)
          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()
          //從左邊沿到原坐標(biāo)之間的空格數(shù)
          var curSp = (curVal.slice(0, caret).match(/\s/g) || []).length
         //修正光標(biāo)位置
         this.selectionEnd = this.selectionStart = caret + curSp - sp
        
        }
      })
    })
  </script>
</body>

</html>

支付寶為了兼容和易用性, 是在懸浮一個(gè)提示框分開(kāi)卡號(hào)的, 這種也比較容易實(shí)現(xiàn)