在 JavaScript 中只输入数字
Anika Tabassum Era
2023年1月30日
2022年6月7日
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>
输出：
Author: Anika Tabassum Era
