HOWTO · JavaScript

在 JavaScript 中只输入数字

默认情况下,HTML 的输入字段采用 text 属性并相应地接受几乎所有可能的字符。如果我们只希望接受数字类型值,我们将不得不将输入字段的属性设置为数字类型,并添加一些 JavaScript 代码行以确保大小写。

本页内容

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

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

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

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

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

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

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

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

让我们检查一下代码。

<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>

输出:

使用字段属性号并为 keyCode 设置条件

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

在 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>

输出:

使用字段属性输入并为 keyCode 设置条件