javascript - 如何删除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" />

1. 看起来您不需要jquery 解决方案，但如果您想使用一个解决方案，您可以使用输入屏蔽，其中有一个library。也支持各种屏蔽选项，如 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" />