时间戳

首页 > 解决方案 > 获取文本区域的长度

javascript - 获取文本区域的长度

问题描述

我想在我的文本区域下方添加书面文本的长度。

为此，我定义了一个span元素来编写我的角色。

但是，我目前收到以下错误：

未捕获的 ReferenceError：未定义 len

在下面找到我的可行示例：

$(".form-control.description").keyup(this.countCharacters.bind(this))


function countCharacters() {
  len = $(".form-control.rigDesc").val().length
  $(".remainChar").html("#" + len);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group row" align="left">
  <div class="col-7">
    <textarea class="form-control rigDesc" rows="4" id="comment" placeholder="Describe..."></textarea>
    <span class="remainChar"></span>
  </div>
</div>

有什么建议如何捕获 textarea 字段的长度？

感谢您的回复！

标签： javascriptjquery

解决方案

您缺少在您的事件中使用的description类，textarea该事件使用类寻找元素，因此您需要在.$(".form-control.description")keyupform-controldescriptiondescriptiontextarea

$(".form-control.description").keyup(this.countCharacters.bind(this))

function countCharacters() {
  len = $(".form-control.rigDesc").val().length
  $(".remainChar").html("#" + len);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group row" align="left">
  <div class="col-7">
    <textarea class="form-control description rigDesc" rows="4" id="comment" placeholder="Describe..."></textarea>
    <span class="remainChar"></span>
  </div>
</div>

为了获得更高的准确性并防止意外错误，您可以使用$("textarea.form-control.description")以确保keyup事件仅适用textarea于类form-control和description.

$("textarea.form-control.description").keyup(this.countCharacters.bind(this))

function countCharacters() {
  len = $(".form-control.rigDesc").val().length
  $(".remainChar").html("#" + len);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group row" align="left">
  <div class="col-7">
    <textarea class="form-control description rigDesc" rows="4" id="comment" placeholder="Describe..."></textarea>
    <span class="remainChar"></span>
  </div>
</div>

推荐阅读