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

Posted 2023-03-30

【中文标题】如何在 texbox 中只允许数字，但也允许使用法语键盘输入

【英文标题】：How to allow only numbers in a texbox but also allow entry with French keyboard

【发布时间】：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 是的。不要检查键，而是检查它附加的值。

【参考方案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, "");
);

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

【讨论】：

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