迹忆客 专注技术分享

JavaScript 中没有特定的方法或属性可以直接使 HTML input 字段仅采用 number 类型的值。相反，input 字段有一个属性 number，它只在输入框中接受数字类型值。

执行仅过滤数字任务的另一种方法是将 input 字段类型设置为 input，这意味着启用几乎所有可能的输入。这会考虑字母数字值。

然后，JavaScript 代码中隐含的特定条件将过滤为仅接受数字。

在以下情况下，我们将使用 keypress 事件并获取它的 keyCode。稍后，根据我们的动机，我们将设置一些条件来仅验证数字类型的数据。

一个示例将具有 number 属性，而另一个示例将具有输入字段的 input 属性。

在 JavaScript 中使用字段属性 number 并为 keyCode 设置条件

我们的示例将有一个对应于 JavaScript 代码库的输入字段。最初，我们将通过 event.keyCode 或 event.which 获取 keyCode。

这个 keyCode 和 which 的工作方式因浏览器而异。因此，最终基于代码，我们将过滤值。

让我们检查一下代码。

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<input name="someid" type="number" onkeypress="isNumberKey(event)"/>
<div>
</div>
<script>
function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}
  $(document).ready(function(){
  $("input").keydown(function(event){
    $("div").html("Key: " + event.which);
  });
});
</script>

输出：

可以看出，我们按下了 a=65、b=66 和 c=67，但这些值没有被接受。后来，值 4 和 2 被放置在输入框中。

在 JavaScript 中使用字段属性 input 并为 keyCode 设置条件

我们将在此段中类似地为我们的输入字段设置 JavaScript 代码，但此属性将设置为 input。默认情况下，Number 类型属性接受数字并排除其他字符，但在 input 类型的情况下，我们将有权输入其他字符，如退格、字母等。

在这里，我们的 JavaScript 代码将验证仅计算数字。

代码片段：

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<input type="input" id="edit1" size="11" maxlength="10" />
<div>
</div>
<script>
$(document).ready(function(){
    $('[id^=edit]').keypress(validateNumber);
});
function validateNumber(event) {
    var key = window.event ? event.keyCode : event.which;
    if (event.keyCode === 8 || event.keyCode === 46) {
        return true;
    } else if ( key < 48 || key > 57 ) {
        return false;
    } else {
    	return true;
    }
};
   $(document).ready(function(){
  $("input").keydown(function(event){
    $("div").html("Key: " + event.which);
  });
});
</script>

输出：