简介
字符计数器是一个方便的UI功能，它可以显示用户在文本字段中可以输入的剩余字符数--如果一个文本字段被限制在一个相对较小的输入大小（例如Twitter对每条推文的280个字符限制）。这个功能通常与文本区或输入字段元素一起使用，以通知用户已使用和剩余的字符数。
在这篇文章中，我们将学习如何在JavaScript中从头开始为文本区域实现一个字符计数器。
最著名的字符计数器的例子可能是Twitter的字符计数器。当你的推文长度接近或超过280个字符时，它就会通知你，但并不阻止你输入更多的字符。这个功能受到广泛的喜爱，因为当你粘贴的一大块文字超过规定的字符长度时，它不会切断文字，并允许你适当地计划如何将其分解成多条推文
在本文结束时，你将能够制作一个这样的输入字段。
如何在JavaScript中实现一个字符计数器
在实现字符计数器之前，我们首先需要设置的是一个基本的HTML表单。它将包含一个textarea 字段和一个代表字符计数器的文本。它显示最大的字符数和剩余的字符数。如果超过了允许的字符数，文本的颜色会变成红色。
<form>
<h3>Write Bio: </h3>
<textarea name="tweet" id="textbox" class="form-control" rows="10" cols="60"></textarea>
<span id="char_count">100/100</span>
<button type="submit">Save</button>
</form>
声明变量
在创建了一个基本的HTML表单后，下一步是用JavaScript实现字符计数器的逻辑。创建JavaScript逻辑的第一步是定义我们的变量，并获得我们以后要利用的DOM组件。特别是textarea 字段和显示字符计数器的span 元素。
let textArea = document.getElementById("textbox");
let characterCounter = document.getElementById("char_count");
const maxNumOfChars = 100;
textArea 将被用来添加一个事件，以激活逻辑功能。我们可以使用许多事件，但是keyup 是最适合这个用例的，因为它将在每次按键时触发逻辑功能--从textarea 中添加或删除一个字符。characterCounter 用于显示字符计数器，而maxNumOfChars 定义了用户可以输入的最大字符数。
实现逻辑
下一步将是创建基本的逻辑，使我们能够确定输入到textArea 的文本的长度，以及从我们选择的最大字符数中扣除该长度。这就是逻辑函数的结构，可以是这样的。
const countCharacters = () => {
// Calculate the number of characters entered into the textarea
// Calculate the number of characters left
// Display this number in the span tag
};
下面是上述结构的实现方式。
const countCharacters = () => {
let numOfEnteredChars = textArea.value.length;
let counter = maxNumOfChars - numOfEnteredChars;
characterCounter.textContent = counter + "/100";
};
**注意：**请记住，countCharacters() ，目前没有处理任何样式。例如，我们想在接近或超过最大字符数时将计数器的颜色变成红色。我们一会儿就会实现这个，因为这是一个比较主观的添加类型。
最后，为了让这个方法发挥作用，我们必须添加一个eventListener ，它将在任何时候通过使用input 事件从textarea 字段中添加/删除一个字符时触发/调用这个方法。另外，我们也可以使用keyup 或keydown 事件来代替。
textArea.addEventListener("input", countCharacters);
自定义计数器的颜色
我们想在超过定义的最大字符数和接近最大字符数时 "提醒 "用户。这很容易通过使用条件语句来实现，我们检查counter 是否小于零或小于，例如，20 ，如果我们想提醒他们正在接近极限。
if (counter < 0) {
characterCounter.style.color = "red";
} else if (counter < 20) {
characterCounter.style.color = "orange";
} else {
characterCounter.style.color = "black";
}
在这里，我们只根据剩余的字符数来改变文本。在那里你可以改变很多东西。例如，如果输入的字符太多，你可以禁用textarea ，自动截断内容，等等。
总结
在这个简短的指南中，我们已经看了如何在JavaScript中创建一个字符计数器并将其附加到一个文本区域，从头开始，用最少的、高性能的代码。
