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

JS输入框只能输入数字

在网页开发中，经常会遇到需要限制用户输入的情况，比如说只允许输入数字。特别是在输入框中，我们希望用户只能输入数字，而不是其他字符。本文将详细介绍如何使用JavaScript来实现输入框只能输入数字的功能。

使用JavaScript限制输入框只能输入数字

我们可以通过监听用户的输入来判断输入的内容是否为数字，并实时过滤掉非数字字符。下面是一个简单的示例，演示如何实现输入框只能输入数字的功能：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input only numbers</title>
</head>
<body>
<input type="text" id="numberInput">

<script>
const numberInput = document.getElementById('numberInput');

numberInput.addEventListener('input', () => {
    numberInput.value = numberInput.value.replace(/[^\d]/g, '');
});
</script>
</body>
</html>

通过上面的代码，我们为文本输入框添加了一个input事件监听器，当用户输入内容时，会触发这个事件。在事件处理函数中，我们使用正则表达式/[^\d]/g来匹配除数字以外的所有字符，并使用replace方法将非数字字符替换为空字符串，从而达到只能输入数字的效果。

示例演示

下面是一个简单的演示，展示了如何使用上述代码实现输入框只能输入数字的功能。在输入框中输入任意字符，会实时过滤掉非数字字符，只保留数字字符：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input only numbers</title>
</head>
<body>
<input type="text" id="numberInput">

<script>
const numberInput = document.getElementById('numberInput');

numberInput.addEventListener('input', () => {
    numberInput.value = numberInput.value.replace(/[^\d]/g, '');
});
</script>
</body>
</html>