更新

Question

我希望在用户输入时动态替换所有非数字输入。我已将输入类型设置为number，但仍允许用户键入非数字，浏览器只会标记它。

我不想仅仅标记非数字（例如，逗号，空格或短划线），而是在用户输入时简单地删除它们。这里列出的代码非常简单，如果遇到非数字则完全删除字符串，这不是我想要的。

＆＃13;

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

＆＃13;

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

＆＃13;

修改

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

Answer 1

更新

Firefox查看true并说，＆＃34;好的，我只是取输入中的任何内容的整个值并覆盖整体值＆＃34。 Chrome以某种方式直观地按照您的意图解释了keydown，但Firefox真实地遵循您的代码。不幸的是，这不是你想要的，所以你需要采用与Firefox不同的方法。

不要比较字符串，而是尝试一次比较一个字符的击键。适用于Chrome的 keyboardEvent.keycode 和适用于Firefox的 keyboardEvent.which 。请参阅演示2 。 BTW，keydown事件通常更可靠，如果由于某种原因keyup是一次性结果，keydown可能更好。如果keydown需要2次击键才能工作，那么请尝试通过将第三个参数设置为DOMObject.addEventListener('keydown', funk, true)来监听捕获阶段而不是气泡阶段。

/\D/gi

将正则表达式更改为：

\D

i表示任何不是数字的内容，var cc = document.querySelector('input.credit-card-number'); cc.addEventListener('keyup', function() { this.value = this.value.replace(/\D/gi, ''); });标志表示不区分大小写。

演示1

＆＃13;

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

＆＃13;

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

＆＃13;

演示2

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

＆＃13;

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

＆＃13;

def check_value(itemlist, value_check):
    print(itemlist) #only for debugging reasons
    if value_check in itemlist:
        print('Item is already in list') #only for debugging reasons
        return False
    else:
        print('Item is not in list') #only for debugging reasons
        return True

def check_input(itemlist, value_check):
    while check_value(itemlist ,value_check)==False:
        value_check = input('Please input valid value')
    return value_check

＆＃13;

Answer 2

只使用javascript，稍作修改即可。将输入类型从number更改为text。

＆＃13;

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

＆＃13;

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

＆＃13;

看起来你不想要jquery解决方案，但是如果你想使用它，你可以去输入屏蔽，其中也有library，并支持各种屏蔽选项，如{{ 1}}，Credit Card和IP Address您可以看到下面有关信用卡的演示部分，我使用Mobile Numbers来创建和测试演示。

＆＃13;

firefox

＆＃13;

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

＆＃13;

Answer 3

只需将输入类型从数字更改为文本。

编辑：至少在Mozilla Firefox中它可以工作。见这里

https://jsfiddle.net/h9ap2ag8/1/

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <input type="text" class="credit-card-number">
</body>
</html>

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

如何删除密钥

修改

3 个答案:

更新

演示1

演示2