Javascript 屏蔽信用卡号，用户输入的第一位和最后四位数字除外

我有一个要求，我需要使用javascript屏蔽信用卡号码的数字，除了第一个和最后四个

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

例：

我已经找到了在用户输入整个卡号后屏蔽卡号的解决方案，但在用户使用javascript事件输入值时却没有屏蔽卡号。由于我不熟悉javascript，因此一些关于如何实现这一点的指导将非常有用

const convert=cc=>{
[cc1，cc2，cc3，cc4]=cc.join（“”.match（/.{1,4}/g）；
返回[cc1 | |“”，cc2？cc2.替换（/\d/g，“*”）：，cc3？cc3.替换（/\d/g，“*”）：，cc4 |“”]
};
设cc=[]；
$（“#cc字段”）。在（“键控键控”上，函数（e）{
抄送推送（e键）
常数=这个
如果（$（“.fa眼”）。是（“.toggled”））{
setTimeout（函数（）{
that.value=convert（cc.join）（“”）
}, 1000)
}
});
$（“.fa eye”）。在（“单击”，函数（）{
$（this.toggleClass（“toggled”）；
$（“#cc字段”）.val(
$（this）.is（“.toggled”）？convert（cc.join（“”）：cc.join（“”）
)
});
.field图标{
浮动：对；
右边距：5px；
利润上限：-25px；
位置：相对位置；
z指数：2；
}
.集装箱{
填充顶部：50px；
保证金：自动；
}

信用卡

const convert=cc=>{
[cc1，cc2，cc3，cc4]=cc.join（“”.match（/.{1,4}/g）；
返回[cc1 | |“”，cc2？cc2.替换（/\d/g，“*”）：，cc3？cc3.替换（/\d/g，“*”）：，cc4 |“”]
};
设cc=[]；
$（“#cc字段”）。在（“键控键控”上，函数（e）{
抄送推送（e键）
常数=这个
如果（$（“.fa眼”）。是（“.toggled”））{
setTimeout（函数（）{
that.value=convert（cc.join）（“”）
}, 1000)
}
});
$（“.fa eye”）。在（“单击”，函数（）{
$（this.toggleClass（“toggled”）；
$（“#cc字段”）.val(
$（this）.is（“.toggled”）？convert（cc.join（“”）：cc.join（“”）
)
});
.field图标{
浮动：对；
右边距：5px；
利润上限：-25px；
位置：相对位置；
z指数：2；
}
.集装箱{
填充顶部：50px；
保证金：自动；
}

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

您可以在这里进行测试：

HTML:


信用卡号码

JS

const cardMask=document.querySelector（“#卡掩码”）
常量注册表=/^\d+$/
让文本=“”
设strNumber=''
cardMask.addEventListener（'keyup'，（事件）=>{
const{key，keyCode}=event
console.log（'keyCode'，keyCode）
const x=event.which | | event.keycode
const textLength=text.length
如果（文本长度<16）{
如果（x>=48&&x 3&&text长度<12）{
text=text.concat（'x'）
}否则{
text=text.concat（键）
}
strNumber=strNumber.concat（键）
}
}
如果（x==8）{
text=text.substr（0，textLength-1）
strNumber=strNumber.substr（0，textLength-1）
}
cardMask.value=文本
控制台信息（'strNumber'，strNumber）
})
嘿，我有一个可能的解决方案，涉及到keyup和DOm操作。以下内容考虑到只有数字可以写入输入中，并且退格在需要时可以工作。最后，它只允许卡字段中最多16个数字

您可以在这里进行测试：

HTML:


信用卡号码

JS

const cardMask=document.querySelector（“#卡掩码”）
常量注册表=/^\d+$/
让文本=“”
设strNumber=''
cardMask.addEventListener（'keyup'，（事件）=>{
const{key，keyCode}=event
console.log（'keyCode'，keyCode）
const x=event.which | | event.keycode
const textLength=text.length
如果（文本长度<16）{
如果（x>=48&&x 3&&text长度<12）{
text=text.concat（'x'）
}否则{
text=text.concat（键）
}
strNumber=strNumber.concat（键）
}
}
如果（x==8）{
text=text.substr（0，textLength-1）
strNumber=strNumber.substr（0，textLength-1）
}
cardMask.value=文本
控制台信息（'strNumber'，strNumber）
})
感谢您的输入，但在我的情况下，我只有一个输入框来捕获整个卡号，如下所示：向下投票，因为这不会根据OP的请求延迟。@abhi1489如何允许用户更正键入错误的数字？@mplungjan。为此，我需要在输入文本框内提供一个类似眼睛的图标就像我们在某些情况下使用的密码一样，单击其中的蒙面值visible@mplungjan谢谢。接受感谢您的输入，但在我的情况下，我只有一个输入框来捕获整个卡号，如下所示：向下投票，因为这不会根据OP的请求延迟。@abhi1489如何允许用户更正键入错误的数字？@mplungjan。为此，我需要在输入文本中提供一个类似眼睛的图标在某些情况下，我们会使用类似于密码的框，单击该框后，将显示隐藏的值visible@mplungjan谢谢。这能回答你的问题吗@征服袋熊你的被骗者似乎没有像我的替代品那样捕获输入的值出于好奇，这个需求试图解决什么问题？我从来不会背诵我的信用卡，所以我把信用卡放在设备旁边
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

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

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)

})