在 JavaScript 中只输入数字
Anika Tabassum Era
2024年2月15日
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>
输出：
