JS只能输入数字|极客笔记

JS只能输入数字

在JavaScript中，有时候我们需要确保用户输入的是数字而不是其他类型的数据。本文将详细介绍如何使用JavaScript来实现只能输入数字的功能。

使用input标签限制用户输入

首先，我们可以通过在HTML中使用<input>标签来创建一个输入框，然后通过设置type="number"来限制用户只能输入数字。

<input type="number" id="numberInput">

上面的代码会创建一个只能输入数字的输入框。用户尝试输入其他类型的数据时，浏览器会自动阻止输入。

通过JavaScript限制输入

除了使用<input>标签的type="number"属性外，我们还可以通过JavaScript代码来限制用户输入。下面是一个示例代码，当用户输入非数字时会弹出警告框并清空输入框。

document.getElementById("numberInput").onkeypress = function(e) {
    var keyCode = e.which ? e.which : e.keyCode;
    if (keyCode < 48 || keyCode > 57) {
        alert("只能输入数字！");
        return false;
    }
}

在上面的代码中，我们通过onkeypress事件监听用户的输入。当用户输入一个字符时，我们获取其ASCII码并判断是否在数字的范围内。如果不是数字，则弹出警告框并返回false，阻止输入。

完整代码示例

下面是一个包含HTML和JavaScript的完整示例，实现了只能输入数字的功能。

<!DOCTYPE html>
<html>
<head>
    <title>只能输入数字</title>
</head>
<body>
    <input type="number" id="numberInput">

    <script>
        document.getElementById("numberInput").onkeypress = function(e) {
            var keyCode = e.which ? e.which : e.keyCode;
            if (keyCode < 48 || keyCode > 57) {
                alert("只能输入数字！");
                return false;
            }
        }
    </script>
</body>
</html>