獲取文本區域的長度

Question

我想在我的文本區域下方添加書面文本的長度。

為此，我定義了一個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字段的長度？

感謝您的答復！

Answer 1

您在textarea中缺少類description ，因為您在keyup事件中使用了$(".form-control.description") ，該事件正在尋找具有form-control和description類的元素，因此您需要在textarea添加description類。

 $(".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事件僅適用於具有form-control和description類的textarea 。

 $("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> 

Answer 2

您的代碼將鍵盤綁定到錯誤的選擇器。 我已經解決了這一問題，並確保len是局部變量而不是全局變量。 見下文：

 $(".form-control").keyup(this.countCharacters.bind(this)) function countCharacters() { var 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>