HOWTO · JavaScript
在 JavaScript 中只输入数字
默认情况下,HTML 的输入字段采用 text 属性并相应地接受几乎所有可能的字符。如果我们只希望接受数字类型值,我们将不得不将输入字段的属性设置为数字类型,并添加一些 JavaScript 代码行以确保大小写。
本页内容
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>
输出: