如何使用javascript计算textarea中键入的字符数？

我不知道为什么当我将内部HTML放在函数中时它不起作用，但当我在控制台中尝试同样的方法时，它工作得很好

这是我的密码。（用于字符计数。）

for（var i=0；i

我的HTML

<textarea type="text" class="input-content"></textarea>
<p class="character-count"></p>

我知道这可能是我错过的愚蠢的事情

PS：我正在寻找一个纯JavaScript的答案。请不要建议jQuery

更新：当我不使用onkeyup事件时，它可以正常工作，但计数不会增加

    for(var i=0; i<document.getElementsByClassName("input-content").length;i++)
{
 var text_max = 99;
 var text_length = document.getElementsByClassName("input-content")[i].value.length;
 var text_remaining = text_max - text_length;
 document.getElementsByClassName("character-count")[i].innerHTML="Character count:" +text_length+"/"+text_max;    
 }

---

for（var i=0；i问题是，当您绑定
keyup
函数时，您使用
i
作为
字符计数
元素的索引。但是当您按下键时，
i
在该点未定义，因此没有索引。您可以通过设置属性这样做（我使用了
name
），当你按下一个键时，获取该属性并将其用作索引


textareas=document.getElementsByClassName（“输入内容”）；
charCounts=document.getElementsByClassName（“字符计数”）；
对于（变量i=0；i

textarea{
高度：300px；
宽度：600px；
调整大小：无；
}

您可以对索引使用闭包：


for（var i=0；i


您应该将您的文本区域包装在一个组中，这样您就不必依赖兄弟姐妹了

在这里拉小提琴：

window.addEventListener（'load'，function（）{
变量组=document.queryselectoral（“.textarea组”）；
函数附件列表器（组）{
group.querySelector（'textarea'）.addEventListener（'keyup'，function（）{
group.querySelector（'.textarea group--characters'）。innerHTML=this.value.length；
});
}
对于（变量i=0；i

还有HTML

<div class="textarea-group">
    <textarea cols="30" rows="5"></textarea>
    <p class="textarea-group--characters"></p>
</div>

<div class="textarea-group">
    <textarea cols="30" rows="5"></textarea>
    <p class="textarea-group--characters"></p>
</div>




您需要先加载文档，然后才能使用此脚本。您的JavaScript应该位于页面底部，并在窗口中定义。addEventListener（“加载”，函数加载（事件）{}）；this.innerHTML将把内容放在我不想要的输入内容中。我想要字符计数
字符计数
类的索引不一定与
输入内容
相同。我建议使用
document.getElementById
并将其属性添加到适当的内容中。从我所看到的你不能在document.getElementByClassName（）上使用.innerHtml@nina索引将始终相同，我不能使用ID，因为我在页面上创建的任何元素都有两个副本（一个用于手机，我将其隐藏在桌面视图中），并且不能有两个ID。我只需要使用类名来执行此操作..：（谢谢Nina。我希望它能跨浏览器运行。你能给出解决方案吗？它在Chrome上运行良好，但在IEF上不起作用。你使用的是哪个版本？它在我的ie11和edge上运行。我在ie9上，但它不起作用……：（它在纯javascript中仍然无法在ie9中工作这有点奇怪，什么部分无法工作？根据，它应该适用于
getElementsByClassName
。该特定部分的javascript无法工作。我根本看不到左边的字符：0/99。我继续键入，它被键入。下面没有文本。
window.addEventListener('load', function () {
    var groups = document.querySelectorAll(".textarea-group");

    function attachListener(group) {
        group.querySelector('textarea').addEventListener('keyup', function () {
            group.querySelector('.textarea-group--characters').innerHTML = this.value.length;
        });
    }

    for (var i = 0; i < groups.length; ++i) {
        attachListener(groups[i]);
    }
});

<div class="textarea-group">
    <textarea cols="30" rows="5"></textarea>
    <p class="textarea-group--characters"></p>
</div>

<div class="textarea-group">
    <textarea cols="30" rows="5"></textarea>
    <p class="textarea-group--characters"></p>
</div>