📅 最后修改于: 2023-12-03 14:42:35.580000 🧑 作者: Mango
在某些情况下，我们需要限制用户在输入框中输入的字符数，以避免数据溢出或显示问题。使用 JavaScript 我们可以轻松地实现此功能。本文将介绍如何使用 JavaScript 显示最大字符数。
首先，在 HTML 中我们需要设置一个文本框和一个用于显示剩余字符数的标签。我们使用以下代码：
<label for="textInput">请输入文本：</label>
<textarea id="textInput" rows="4" cols="50"></textarea>
<br>
<span id="charCount"></span>
我们使用 <textarea> 标签创建文本框并通过 id 属性设置其唯一标识符 textInput。同时，我们创建一个空的 span 标签用于显示剩余字符数。
接下来，我们需要使用 JavaScript 检测文本框中的输入并更新剩余字符数。我们使用以下代码：
const textInput = document.getElementById('textInput');
const charCount = document.getElementById('charCount');
const maxChar = 50; // 设置最大字符数
textInput.addEventListener('input', function() {
const textCount = textInput.value.length; // 获取当前字符数
if (textCount > maxChar) {
charCount.style.color = 'red'; // 超出最大限制字符数时，让字体变为红色
} else {
charCount.style.color = ''; // 未超出最大限制字符数时，让字体保持原色
}
charCount.textContent = `${maxChar - textCount} / ${maxChar}`; // 将剩余字符数显示在标签上
});
我们首先获取文本框和用于显示剩余字符数的标签，并设置一个常量 maxChar 来设置最大字符数。然后，我们使用 addEventListener() 函数来监听文本框中的输入事件，并使用 value.length 属性获取当前字符数。如果当前字符数大于 maxChar，我们将剩余字符数以红色文本显示，否则以黑色文本显示。我们使用 textContent 属性将剩余字符数显示在 charCount 标签上。
最终，我们将 HTML 和 JavaScript 的代码合并，得到以下完整代码：
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 显示最大字符数</title>
</head>
<body>
<label for="textInput">请输入文本：</label>
<textarea id="textInput" rows="4" cols="50"></textarea>
<br>
<span id="charCount"></span>
<script>
const textInput = document.getElementById('textInput');
const charCount = document.getElementById('charCount');
const maxChar = 50; // 设置最大字符数
textInput.addEventListener('input', function() {
const textCount = textInput.value.length; // 获取当前字符数
if (textCount > maxChar) {
charCount.style.color = 'red'; // 超出最大限制字符数时，让字体变为红色
} else {
charCount.style.color = ''; // 未超出最大限制字符数时，让字体保持原色
}
charCount.textContent = `${maxChar - textCount} / ${maxChar}`; // 将剩余字符数显示在标签上
});
</script>
</body>
</html>
现在，您已经学会了如何使用 JavaScript 显示最大字符数。