Logo

菜单

发布于 2026-01-06 2 阅读
0

使用 HTML 和 CSS 限制文本框中的字符数

使用 HTML 和 CSS 限制文本框中的字符数

如果您想使用 JavaScript 限制输入框的字符数，那么本文将对您有所帮助。本文将演示如何借助 HTML、CSS 和 JavaScript 实现文本框的字符数限制。

我们在网站的注册表格中经常会看到这种字符限制。表格会告知用户最多可以输入多少个字符。每次输入一个字符都会被计入。当用户输入的文本超过最大字符数限制时，系统会发出警告。

下面我将进行现场演示，帮助您了解这种设计是如何运作的。

下面我将逐步展示如何使用 HTML 和 CSS 创建这个限制字符数的输入框。首先，我使用 HTML 和 CSS 设计了它，然后使用 JavaScript 实现了它。

第一步：设计网页

我使用以下CSS代码设计了网页。这里我使用了蓝色作为网页的背景色。

*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: #a9d1ea;
}
Enter fullscreen mode Exit fullscreen mode

替代文字

步骤二：使用 HTML 和 CSS 创建一个框

现在我在网页上创建了一个框。如您所见，这是一个矩形框。我使用了一个minimum height of 250 px宽度为 450 像素的框。

我使用白色作为背景色，并设置了圆角，制作了周围的四个方框。

<div class="container">

</div>
Enter fullscreen mode Exit fullscreen mode 
.container{
    background-color: #ffffff;
    width: 450px;
    min-height: 250px;
    padding: 30px 20px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    border-radius: 8px;
    box-shadow:  0 20px 25px rgba(0,0,0,0.25);
}
.container *{
    font-family: "Poppins",sans-serif;
    font-size: 16px;
}
Enter fullscreen mode Exit fullscreen mode

替代文字

步骤 3：使用文本区域创建输入空间

我使用以下 HTML 和 CSS 代码创建了文本输入框。基本上，我使用了 HTML 的 textarea 元素来创建输入框。

正如演示中所示，输入框周围通常会有一圈绿色边框。border: 2px solid # 3ba51f那是我以前做的。

<textarea id="my-text" rows="5" placeholder="Type something here.."></textarea>
Enter fullscreen mode Exit fullscreen mode 
textarea{
    display: block;
    width: 100%;
    min-height: 230px;
    resize: none;
    padding: 20px;
    color: #202020;
    border: 2px solid #3ba51f;
    border-radius: 5px;
    outline: none;
}
Enter fullscreen mode Exit fullscreen mode

替代文字

步骤 4：创建角色计数位置

现在我用以下代码创建了一个计数区域。每当您输入一个字符，这些字符都会被持续计数。正常情况下，这个计数区域是不可见的。但使用 JavaScript 后，计数结果就会显示出来。

 <p id="result"></p>
Enter fullscreen mode Exit fullscreen mode 
p{
    width: 100%;
    text-align: right;
    margin-top: -30px;
    padding-right: 10px;
    color: #737373;
}
Enter fullscreen mode Exit fullscreen mode

替代文字

步骤 5：使用 JavaScript 激活系统

上面我们刚刚设计好了，现在我们将借助 JavaScript 来实现它。首先，我设置了一个常量my-text和result。

var myText = document.getElementById("my-text");
var result = document.getElementById("result");
Enter fullscreen mode Exit fullscreen mode

我使用变量 limit 设置了输入字符数限制，也就是可以输入的字符数上限。这里我设置的是 100。如果你想在输入框中输入 200 个字符，那么你可以将 100 替换为 200。

var limit = 100;
Enter fullscreen mode Exit fullscreen mode

我使用以下代码来查看输入框中统计的字符数是如何显示的。正如您之前看到的，我们使用 HTML 和 CSS 创建了一个计数区域。现在我已将其实现为result.textContent……

result.textContent = 0 + "/" + limit;
Enter fullscreen mode Exit fullscreen mode

替代文字
下面我给出了完整的条件。如果输入区域有 100 个字符会怎样？如果超过 100 个字符又会怎样？为此，我使用了 if 函数。首先，我将要输入到输入框中的字符总数保存在一个名为 `character` 的常量中textLength。

如果该值textLength超过阈值limit，则边框和颜色将变为红色。

然后我添加了 else 语句，并给出了另一个条件。如果上述条件不成立，则文本区域和结果将显示为绿色，表示不会发生任何变化。

myText.addEventListener("input",function(){

    var textLength = myText.value.length;

    result.textContent = textLength + "/" + limit;

    if(textLength > limit){
        myText.style.borderColor = "#ff2851";
        result.style.color = "#ff2851";
    }
    else{
        myText.style.borderColor = "#31821b";
        result.style.color = "#31821b";
    }
});
Enter fullscreen mode Exit fullscreen mode

替代文字

替代文字
希望您已经从上面的教程中学会了我是如何创建这个 JavaScript 限制字符数输入框的。

相关帖子：

  1. 响应式页脚 HTML CSS
  2. 海德拉巴的IB学校
  3. 使用 JavaScript 的简单秒表
  4. 怀特菲尔德的幼儿园
  5. JavaScript 密码生成器
  6. 海德拉巴的国际学校
  7. 使用 HTML 和 CSS 的侧边栏菜单

如果你想用 jQuery 代替 JavaScript，可以参考我之前的文章。如有任何问题，欢迎留言提问。

您可以访问我的博客查看更多类似教程。https
://www.foolishdeveloper.com/

文章来源：https://dev.to/shantanu_jana/javascript-limit-characters-in-textbox-with-html-css-249h
Angular 16 新特性：自动...
你应该了解的 5 种旧编程语言，D...