创建文本区域字符限制指示器

2025-06-10

创建文本区域字符限制指示器

介绍

文本区域是 Web 的重要工具，它允许应用程序收集用户的附加信息。这有助于促进用户与应用程序之间的无缝沟通和互动。

为什么字符限制指标很重要？

字符限制指示器可让用户了解文本区域属性所设置的字符数maxlength。这让用户可以自定义文本以传达必要的信息，同时还能了解剩余的书写空间。

在本文中，我们将研究如何在项目中为文本区域字段实现字符限制指示器。

以下是我们将要创建的内容的预览。

文本区域字符限制预览

现在我们了解了字符限制指标的重要性，让我们深入研究其实现方法。

设置 HTML

首先，在我们的 HTML 文件中，我们包含一个h1带有项目名称的标签。

<h1>Textarea character limit indicator</h1>
Enter fullscreen mode Exit fullscreen mode

接下来，我们创建一个容器div来容纳文本区域和进度条。

<div id="container">
</div>
Enter fullscreen mode Exit fullscreen mode

在其中div，我们包含一个元素，label其属性为文本字段允许 150 个字符。textareamaxlength

<label for="txt">Type something:</label>
<textarea name="type-something" id="txt" maxlength="150" cols="30" rows="10"></textarea>
Enter fullscreen mode Exit fullscreen mode

在文本区域字段下方，我们包含了稍后将要设计的进度条的结构。

<div id="progress">
  <div id="progress-bar"></div>
  <p id="remaining-chars"></p>
</div>
Enter fullscreen mode Exit fullscreen mode

我们的 html 现在看起来应该是这样的：

纯HTML结构的textarea字符限制预览

这就是我们的 HTML 文件的全部内容。接下来，我们进入 CSS 文件来设置元素的样式。

使用 CSS 设置页面样式

在我们的 CSS 文件中，首先应用一些默认的页面样式。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
Enter fullscreen mode Exit fullscreen mode

接下来，我们设计页面的body和标签的样式。h1

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 10px 30px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background-color: #f5f5ff;
}

h1 {
  text-align: center;
  margin: 10px 0 50px;
}
Enter fullscreen mode Exit fullscreen mode

之后，我们对容器应用一些样式div，帮助正确对齐容器中的文本区域和进度条。

#container {
  display: grid;
  background-color: white;
  border-radius: 20px;
  box-shadow: 1px 1px 12px #aaa;
  padding: 40px;
  font-size: 13px;
  margin-bottom: 70px;
}
Enter fullscreen mode Exit fullscreen mode

接下来，我们设置label和texarea字段的样式以及其焦点状态。

label {
  font-size: 15px;
  font-weight: bold;
}

textarea {
  resize: none;
  padding: 10px;
  margin: 10px 0;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 1.3px;
  border-radius: 5px;
}

textarea:focus {
  outline: 1px solid rgb(14, 51, 14);
}
Enter fullscreen mode Exit fullscreen mode

接下来，我们设置进度条和remaining-chars元素的样式，用于显示还剩下多少个字符可用。

#progress {
  width: 100%;
  height: 7px;
  box-shadow: inset 1px 1px 2px #ccc;
  border: 1px solid #bbb;
  border-radius: 15px;
}

#progress-bar {
  height: 100%;
}

#remaining-chars {
  font-size: 11px;
  color: #b62020;
  margin-top: 3px;
  float: right;
  display: none;
}
Enter fullscreen mode Exit fullscreen mode

我们的 CSS 文件到此结束。现在，让我们深入研究激动人心的部分：让我们的限制指示器能够正常工作。

使用 JavaScript 实现限制指示器

在我们的 JS 文件中，我们首先要获取稍后要使用的元素。

const textarea = document.getElementById("txt");
const progressBar = document.getElementById("progress-bar");
const remChars = document.getElementById("remaining-chars");
Enter fullscreen mode Exit fullscreen mode

接下来，我们创建字符计数器函数。

function charCounter(inputField) {
  // Counter logic goes in here
}
Enter fullscreen mode Exit fullscreen mode

在这个函数内部，我们创建了3个新变量，一个用于获取maxlength我们所针对的输入字段的属性，另一个用于存储文本字段中的当前字符长度，第三个用于根据文本字段的最大长度和当前长度计算进度宽度。

const maxLength = inputField.getAttribute("maxlength");
const currentLength = inputField.value.length;
const progressWidth = (currentLength / maxLength) * 100;
Enter fullscreen mode Exit fullscreen mode

接下来，我们将进度条的宽度设置为progressWidth变量的值。这将根据文本字段中可用的字符数调整宽度百分比。

progressBar.style.width = `${progressWidth}%`;
remChars.style.display = "none";
Enter fullscreen mode Exit fullscreen mode

之后我们根据变量的值设置进度条的背景颜色progressWidth，如果变量值小于等于60则设置为绿色，如果变量值大于60小于85则设置为橙色，如果变量值大于等于85则设置为红色，并显示还剩下多少个字符可用。

if (progressWidth <= 60) {
    progressBar.style.backgroundColor = "rgb(19, 160, 19)";
  } else if (progressWidth > 60 && progressWidth < 85) {
    progressBar.style.backgroundColor = "rgb(236, 157, 8)";
  } else {
    progressBar.style.backgroundColor = "rgb(241, 9, 9)";
    remChars.innerHTML = `${maxLength - currentLength} characters left`;
    remChars.style.display = "block";
  }
}
Enter fullscreen mode Exit fullscreen mode

现在我们已经完成了字符计数器功能的创建，让我们添加一个oninput事件监听器来监听输入到textarea字段中的每个字符。

textarea.oninput = () => charCounter(textarea);
Enter fullscreen mode Exit fullscreen mode

调用该函数后，每次在文本区域字段中或文本区域外输入一个字符时，进度条宽度都会更新，以显示还剩下多少字符空间可供使用。

结论

通过本指南，您将能够在下一个项目中无缝包含字符限制指示器，从而帮助改善应用程序中的整体用户通信体验。

本文就到这里。你可以在下面的codepen中查看该项目的完整实现：

另外，如果你正在寻找将其应用于文档中多个文本区域的方法，我已经在下面的评论区中介绍了。你可以直接向下滚动查看。

如果你有什么教程想让我讲解，欢迎在评论区留言。祝你编程愉快！😊

鏂囩珷鏉ユ簮锛�https://dev.to/sarahokolo/creating-a-textarea-character-limit-indicator-5fol
Devto 翻译
PREV
字谜检查器 - 三种 JavaScript 解决方案
NEXT
我需要个人网站/作品集吗？