屏蔽用户输入的信用卡号，除了前四位和后四位

Question

我有一个要求，我需要使用 javascript 屏蔽信用卡号的数字，但前四位和后四位除外。

信用卡值将仅作为一个输入框的一部分被捕获，我需要在用户输入值后屏蔽数字

例如：

Suppose the credit card number is :
4000 5000 6000 7000

while the user enters the input the first four digits i.e.
4000 will be visible but while the user enters the digit '6' 
it should be visible for some time and then get masked.

The output after entering all the digits would need to look like:
4000 XXXX XXXX 7000

Also i would need the actual card number to be captured separately for processing

我找到了在用户输入整个卡号后屏蔽卡号的解决方案，但在用户使用一些 javascript 事件输入值时没有做任何事情。因为我是 javascript 新手，所以我可以完成一些指导这真的很有帮助

Answer 1

const convert = cc => {
  [cc1, cc2, cc3, cc4] = cc.join("").match(/.{1,4}/g);
  return [cc1 || "", cc2 ? cc2.replace(/\d/g, "*") : "", cc3 ? cc3.replace(/\d/g, "*") : "", cc4 || ""]
};

let cc = [];
$("#cc-field").on("keydown", function(e) {
  cc.push(e.key)
  const that = this
  if ($(".fa-eye").is(".toggled")) {
    setTimeout(function() {
      that.value = convert(cc).join("")
    }, 1000)
  }
});
$(".fa-eye").on("click", function() {
  $(this).toggleClass("toggled");
  $("#cc-field").val(
    $(this).is(".toggled") ? convert(cc).join("") : cc.join("")
  )
});

.field-icon {
  float: right;
  margin-right: 5px;
  margin-top: -25px;
  position: relative;
  z-index: 2;
}

.container {
  padding-top: 50px;
  margin: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<div class="container">
  <div class="row">
    <div class="col-md-8 col-md-offset-2">

      <div class="panel panel-default">
        <div class="panel-body">
          <form class="form-horizontal" method="" action="">
            <div class="form-group">
              <label class="col-md-4 control-label">Credit card</label>
              <div class="col-md-6">
                <input id="cc-field" type="text" class="form-control" name="cc">
                <span class="fa fa-fw fa-eye field-icon toggled"></span>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

旧答案：它没有延迟，但允许用户更正错误输入的数字

let cc;
$(".cc").on("input",function() {
  const val = $(this).val();
  const len = $(this).attr("maxlength");
  const max = $(this).attr("max");
  if (len && val > len) {
    $(this).val(val.slice(0, len));
  }  
  else if (max && +val > max) {
    $(this).val(max);
  }  
  const cc = $(".cc").map(function(i,cc) { 
    return cc.value;
  }).get().join(" ");
  $("#cc").text(cc);
})

.cc { width:80px }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="cc" type="number" max="9999">
<input class="cc" type="password" maxlength="4">
<input class="cc" type="password" maxlength="4">
<input class="cc" type="number" max="9999">
<br/>
<span id="cc"></span>

Answer 2

嘿，我有一个可能的解决方案，它涉及 keyup 和 DOm 操作。以下考虑到只能在输入中写入数字，并且退格在您需要时起作用。最后它只允许卡片字段中最多16个数字

你可以在这里测试它：https://codepen.io/jasmo2/pen/yLedNoR?editors=1010

HTML：

<section>
  <div >
    <h3> Credit card number</h3>
    <input id='card-mask' type='text'/>
 <div >
</section>

JS

const cardMask = document.querySelector('#card-mask')

const reg = /^\d+$/
let text = ''
let strNumber = ''

cardMask.addEventListener('keyup', (event) => {
  const {key, keyCode} = event
  console.log('keyCode', keyCode)
   const x = event.which || event.keycode
   const textLength = text.length
   
   if(textLength < 16){
     if (x >= 48 && x <= 57) {
        if(textLength > 3 && textLength < 12) {
          text = text.concat('x')        
        } else {
          text = text.concat(key)        
        }
        strNumber = strNumber.concat(key)
     }
   }
  if(x===8) {
       text = text.substr(0,textLength-1)
       strNumber = strNumber.substr(0,textLength-1)
   }
   cardMask.value = text
  
     
   console.info('strNumber', strNumber)

})