有没有办法在 type="number" 输入字段中捕获字母？答案

【问题标题】：Is there a way to capture Letters in a type="number" input field?有没有办法在 type="number" 输入字段中捕获字母？
【发布时间】：2019-11-06 00:51:08
【问题描述】：

我有这个输入字段：

<input type="number" class="col-sm-12" id="scanner" autofocus>

现在，您可以将任何内容扫描到其中，如果扫描的数据包含除数字以外的任何内容，则会将其删除。这适用于 Android webView 移动应用，当此扫描仪获得焦点时，我们只想显示数字键盘，这就是为什么它是“数字”类型的原因。

任何人都知道即使输入字段的类型是“数字”而不将其更改回 type="text"，我如何捕获这些字母？

【问题讨论】：

为了帮助我们回答这个问题并避免XY Problem situation，您能否提供一些关于您为什么需要它的内容？
是的，我正在构建一个扫描条形码的功能。条形码应该只是数字，但用户有时会扫描包含字母的条形码，我们希望在不显示字母键盘的情况下捕获它。

标签： html input text types numbers

【解决方案1】：

不，input 字段的 numbers 属性会删除值，并且我发现这些值无法捕获，因为 input 字段应用了隐式 regex。

但是，如果它们对您有价值，您可以尝试进行自己的验证并抓住这些信件。

请看下文如何实现这一点。

首先，将字段类型属性设置回text，即

<input type="text" placeholder="Enter Number"/>

您只能使用正则表达式从字符串中获取字母：

/[^a-zA-Z]+/g

您只能使用正则表达式从字符串中获取数字：

/\D/g

应用onkeyup 事件来监控字段的输入：

onkeyup="validate(this)

最终解决方案监视onkeyup 事件，去掉字母，只保留数字。但是，它会捕获 var 中的字母以供以后使用。

<script>
function validate(element) {
    var letters = element.value.replace(/[^a-zA-Z]+/g, '');
    var numbers = element.value.replace(/\D/g,'');
    element.value = numbers;
   
}
</script>
<input type="text" onkeyup="validate(this)" placeholder="Enter Number"/>

另见JSFiddle

编辑：

如果您不喜欢字母的显示方式，然后立即从输入中删除，则需要监视 keydown 事件并将每个字母/符号与其 keyCode 匹配。

可以在这里找到它的实现：How to prevent invalid characters from being typed into input fields

可在此处找到 Javascript 密钥代码的完整列表：Javascript Char Codes (Key Codes)

【讨论】：

这是一个很好的解决方案，如果我不必显示数字键盘，它就可以解决我的问题。肯定会在我的另一个功能中使用它。谢谢！

【解决方案2】：

数字类型的输入字段允许使用字母 e（表示指数）。所以你应该可以通过输入字母 e 来测试你的方法。

【讨论】：