Form Input not allowing me to delete added "/" for CC expiration field

Question

I am attempting to create a text box that accepts an expiration date from a CC. When the user types, I want to add a slash (/) after the first two numbers (to format the text like MM/YY). This works just fine. However, when I attempt to delete numbers after the slash has been added, my code just keeps adding the slash back in and won't let me delete any further. I referenced this article (Detect backspace and del on "input" event?) on how to detect backspace or delete on input event and built it into my code, but still doesn't work. Any thoughts on how I can get this to work or where I am going wrong?

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


});

Thanks in advance!

score 1 · Accepted Answer · answered May 06 '21 at 12:46

is this the behaviour ur expecting

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

That did it. Is this all you changed? if(this.value.length === 2 && KeyPress !== 8 && KeyPress !== 46 ) — user2828701, May 06 '21 at 13:09
yep. but u need to add more validations. refer [this link](https://stackoverflow.com/questions/5005877/whats-the-best-way-to-automatically-insert-slashes-in-date-fields) — ashen madusanka, May 06 '21 at 14:46

Form Input not allowing me to delete added "/" for CC expiration field

1 Answers1