使用 Vanilla JavaScript 的文本區域字符計數器
簡介
一個字符計數器 是一個方便的UI 功能 顯示用戶可以在文本字段中輸入的剩餘字符數 - 如果文本字段被限制為相對較小的輸入大小（例如 Twitter 對每條推文 280 個字符的限制）。此功能通常與文本區域一起使用 和/或 輸入字段 元素來通知用戶已使用和剩餘的字符數。
字符計數器最著名的例子可能是 Twitter 的字符計數器。當您的推文長度接近並超過 280 個字符時，它會通知您，但不會阻止您輸入更多字符。此功能廣受喜愛，因為它不會在您粘貼長於規定字符長度的文本塊時切斷文本，並允許您適當地計劃如何將其分解為多條推文！
在本文結束時，您將能夠製作這樣的輸入字段：
注意： 創建表單所涉及的所有代碼都將出現在指南中。此外，CodePen 上還提供源代碼和實時預覽。
如何在 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() 目前不處理任何樣式。例如，當接近或超過最大字符數時，我們希望將計數器顏色變為紅色。我們稍後會實現它，因為它是一種更主觀的加法。
免費電子書：Git Essentials
查看我們的 Git 學習實踐指南，其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它！
最後，為了讓它工作，我們必須添加一個 eventListener 每當從 textarea 中添加/刪除字符時，都會觸發/調用此方法 使用 input 字段 事件。或者，我們可以使用 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 中的文本區域。
