表单输入不允许我删除为 CC 过期字段添加的"/"

Question

我正试图创建一个文本框，接受CC的过期日期。当用户键入时，我想在前两个数字后面添加一个斜线(/((以将文本格式化为MM/YY(。这很好用。然而，当我试图在添加斜线后删除数字时，我的代码只是不断地添加斜线，不允许我再删除任何数字。我引用了这篇文章(Detect backspace and del on"input"事件？(，介绍如何检测backspace或delete on input事件，并将其构建到我的代码中，但仍然不起作用。你有没有想过我该怎么做，或者我哪里出了问题？

//textbox
<div><label for="expiryBx">Expiration Date</label><div><input type="text" id="expiryBx" name="expiryBx" maxlength="5" placeholder="MM/YY"></div></div>
//add "/" (slash) after two chars to make it look like an expiration date
$('#expiryBx').on('keyup',function(e){
//var KeyPress = e.which;
var KeyPress = event.keyCode || event.charCode;
console.log('poll number of keys pressed ' + this.value.length);
console.log('poll keypressed ' + KeyPress);
//add the slash
if(this.value.length === 2 && (KeyPress !== 8 || KeyPress !== 46)){
this.value = this.value + '/';
}
//after 5 chars (4 + slash) split the string so that I can use it elsewhere
if(this.value.length === 5){
var FullExpiry = this.value;
expiryValues = FullExpiry.split('/');
var ExpMnt = expiryValues[0]; 
var ExpYr = expiryValues[1]; 
var ExpFinalYMnt = 'string:' + ExpMnt;
var ExpFinalYr = '20' + ExpYr;
console.log('poll ' + ExpMnt);
console.log('poll ' + ExpYr);

}

});

提前感谢！

Answer 1

这是我们期望的行为吗

//add "/" (slash) after two chars to make it look like an expiration date
$('#expiryBx').on('keyup',function(e){
//var KeyPress = e.which;
var KeyPress = event.keyCode || event.charCode;
console.log('poll number of keys pressed ' + this.value.length);
console.log('poll keypressed ' + KeyPress);
//add the slash && (KeyPress !== 8 || KeyPress !== 46)
if(this.value.length === 2 && KeyPress !== 8 && KeyPress !== 46 ){
this.value = this.value + '/';
}
//after 5 chars (4 + slash) split the string so that I can use it elsewhere
if(this.value.length === 5){
var FullExpiry = this.value;
expiryValues = FullExpiry.split('/');
var ExpMnt = expiryValues[0]; 
var ExpYr = expiryValues[1]; 
var ExpFinalYMnt = 'string:' + ExpMnt;
var ExpFinalYr = '20' + ExpYr;
console.log('poll ' + ExpMnt);
console.log('poll ' + ExpYr);

}

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
//textbox
<div><label for="expiryBx">Expiration Date</label><div><input type="text" id="expiryBx" name="expiryBx" maxlength="5" placeholder="MM/YY"></div></div>