How to remove certain characters on keyup

Question

I'd like to dynamically replace all non-numeric input as the user types. I've got the input type set to number, but that still allows the user to type non-numbers, the browser just flags it.

Instead of just flagging non-numbers (for exampl, commas, spaces, or dashes), I'd like to simply remove them as the user types. The code listed here, which is very straightforward, is completely deleting the string if a non-number is encountered, which is not what I want.

var cc = document.querySelector('input.credit-card-number');
cc.addEventListener('keyup',function(){
	this.value = this.value.replace(/[^0-9]/g,'');
});

<input type="number" class="credit-card-number">

Edit

This is a Firefox-only problem. Chrome seems to work as expected. I'd still appreciate a fix if anyone can come up with one.

Answer 1

1. Sticking with javascript only, a slight modification will make this work. Change the input type from number to text.

var input = document.querySelector('input.credit-card-number');
input.addEventListener('keyup', function(e) {
  this.value = this.value.replace(/[^0-9]/, '');
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<input type="text" class="form-control credit-card-number" placeholder="Ex: 0000 0000 0000 0000" />

2. Don't look like you want jquery solution but if you want to use one you can go for input masking for which there is a library too and support various masking options like Credit Card, IP Address and Mobile Numbers you can see a demo for the credit card concerned section below I used firefox to create and test the demo.

//Credit Card
$('.credit-card-number').inputmask('9999 9999 9999 9999', {
  placeholder: '____ ____ ____ ____'
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/css/inputmask.css" rel="stylesheet" />
<input type="text" class="form-control credit-card-number" placeholder="Ex: 0000 0000 0000 0000" />

Answer 2

Update

Firefox looks at this.value and says, "Ok, I'll just take the whole value of whatever is in the input and overwrite the whole value." Chrome somehow intuitively interprets keydown the way you intended, but Firefox literally follows your code truthfully. Unfortunately, that's not what you want, so you'll need to take a different approach with Firefox.

Instead of comparing strings, try comparing keystrokes a character at a time. keyboardEvent.keycode for Chrome and keyboardEvent.which for Firefox. See Demo 2. BTW, keydown event is usually more reliable, if for some reason keyup is one off on results, keydown is probably better. If keydown needs 2 keystrokes to work, then try listening on capture phase instead of the bubble phase by setting the third parameter to true.

DOMObject.addEventListener('keydown', funk, true)

---

Change regex to:

/\D/gi

\D means anything that is not a digit and the i flag is for case insensitivity.

Demo 1

var cc = document.querySelector('input.credit-card-number');
cc.addEventListener('keyup', function() {
  this.value = this.value.replace(/\D/gi, '');
});

<input type="number" class="credit-card-number">

Demo 2

charCode > 47 && charCode < 58 ......0 to 9
charCode > 95 && charCode < 105......0 to 9 scroll locked 10-key pad
charCode == 8........................← Backspace

var cc = document.querySelector('input.credit-card-number');

cc.addEventListener('keydown', function(e) {

  var charCode = (e.which) ? e.which : e.keyCode;
  if ((charCode > 47 && charCode < 58) || (charCode > 95 && charCode < 105) || charCode == 8) {
    return true;
  }
  e.preventDefault();
  return false;
}, true);

<input type="number" class="credit-card-number">