屏蔽除用户输入的前四位和后四位数字之外的信用卡号

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)

})