Question

我有以下代码只允许输入数字（为简洁起见，删除了其他逻辑）。

$("input").keydown(function (event) {
     var key = event.keyCode;
     if ((key < 48 || key > 57) && (key < 96 || key > 105) || event.shiftKey) {
         event.preventDefault();
     }
});

此代码在英文键盘中工作正常，但在法语键盘上使用shift键，因此逻辑在那里失败。如果我移除了移位，则逻辑在英语键盘中失败。

有没有办法检测在任何类型的键盘上都可以使用的keydown事件中正在按下的数字？

由于

Answer 1

使用自定义函数检查keydown的值是否为数字。从上一个答案（Validate decimal numbers in JavaScript - IsNumeric()）：

function isNumber(n) 
{
  return !isNaN(parseFloat(n)) && isFinite(n);
}

您的处理程序已更新：

 $("input").keydown(function (event) {
    var code = event.keyCode;

     //Allows left and right arrows, backspace, and delete
     if(code == 37 || code == 39 || code == 8 || code == 46)
        return;

     var character = String.fromCharCode(code);
     if(event.shiftKey || !isNumber(character)){
         event.preventDefault();
     }
 });

Answer 2

这会有用吗？

$("input").bind("propertychange input textInput", function() {
  this.value = this.value.replace(/[^\d.]/g, "");
});

当然，这会在输入事件之后修剪值，所以我不确定这是否是你想要的

Answer 3

我发现event.key比event.keyCode更好。事件处理程序必须为onkeydown才能正常工作。首先检查是否为数字。这是我的代码。经过测试可在IE11，Edge，Chrome和Firefox上运行。

$("input").keydown(function (event) {
  var code = event.keyCode;
  var key = event.key;

  if (!isNaN(Number(key)))
    return;

  // allow backspace, delete, left & right arrows, home, end keys
  if (code == 8 || code == 46 || code == 37 || code == 39 || code == 36 || code == 35) {
    return;
  } else {
    evt.preventDefault();
  }
});

Answer 4

@HostListener('keydown', ['$event']) onKeyDown(event) {    
      if ((e.keyCode < 48 || e.keyCode > 57) && (e.keyCode < 96 || e.keyCode > 105)) {
        e.preventDefault();
      } else if (!this.isNumber(e.key)) {//For french keyboard 
        e.preventDefault();
      }
    }
  }


  isNumber(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
  }

由于2个不同的键盘，我遇到了类似的问题。我可以通过检查键值（而不是keyCode值）中是否不是数字来解决这个问题。

如何只允许文本框中的数字，但也允许使用法语键盘输入

4 个答案: