如何在 texbox 中只允许数字，但也允许使用法语键盘输入答案

【问题标题】：How to allow only numbers in a texbox but also allow entry with French keyboard如何在 texbox 中只允许数字，但也允许使用法语键盘输入
【发布时间】：2013-09-12 21:12:06
【问题描述】：

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

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

此代码在英文键盘上运行良好，但在法文键盘上使用 shift 键，因此逻辑在那里失败。如果我删除班次，英文键盘中的逻辑会失败。

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

谢谢

【问题讨论】：

或许你能找出keyboard/locale they are using是什么类型的？
可能有，只需 console.log 键并找出要排除/包含的 keyCode。
如果您要这样验证输入，请务必抓住使用鼠标复制/粘贴值的情况
或者也许使用fromCharCode() 来查看键码是否为数字，或者使用HTML5 数字输入？
@adeneo 是的。不要检查键，而是检查它附加的值。

标签： javascript jquery

【解决方案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();
     }
 });

【讨论】：

我也在使用法式布局键盘（比利时 azerty）。奇怪的是，这允许我输入位于我的数字键上的特殊字符。可能还应该在那里的某处添加一个退格检查:)
哪个特殊字符正在传递 isNumber 函数？
String.fromCharCode(event.keyCode) 返回 4，即使文本框中的结果字符是 '
这有同样的问题，允许 shift + 数字字符。（例如 shift+1 会在英文键盘上显示 !）

【解决方案2】：

我发现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();
  }
});

【讨论】：

【解决方案3】：

@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】：

这行得通吗？

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

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

【讨论】：

理想情况下我想阻止输入而不是显示字符并在之后将其修剪掉..