如何删除keyup上的某些字符

Question

我想动态替换所有非数字输入作为用户类型。我已经将输入类型设置为number，但这仍然允许用户输入非数字，浏览器只是标记它。

而不是仅仅标记非数字（例如，逗号、空格或破折号），我想在用户键入时简单地删除它们。这里列出的代码很直接，如果遇到非数字就完全删除字符串，这不是我想要的。

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

编辑

这是一个仅限 Firefox 的问题。Chrome 似乎按预期工作。如果有人能提出一个解决方案，我仍然会很感激。

Answer 1

1. javascript仅坚持，稍加修改即可完成这项工作。将输入类型从 更改number为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. 不要像你想jquery的解决方案，但如果你想使用一个你可以去输入掩码为其中有一个图书馆太和支持像各种屏蔽选择Credit Card，IP Address并且Mobile Numbers你可以看到下面我使用的信用卡有关部分演示firefox创建和测试演示。

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