Question

当我将内置HTML放入函数内部时，我不知道为什么内部HTML不起作用但是当我在我的控制台中尝试使用它时它工作正常。

这是我的代码。（这是为了字符数。）

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

我的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;    
 }

Answer 1

您可以为索引使用闭包：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

问题是，当您绑定keyup函数时，您使用i作为character-count元素的索引。但是当您按下某个键时，i在该点未定义，因此没有索引。您可以这样做，通过设置属性（我使用name），当您按下某个键时，获取该属性并将其用作索引。

＆＃13;

textareas = document.getElementsByClassName("input-content");
charCounts = document.getElementsByClassName("character-count");

for (var i = 0; i < textareas.length; i++) {
  textareas[i].setAttribute("name", i);
  textareas[i].onkeyup = function() {
    var text_max = 99;
    var text_length = this.value.length;
    var text_remaining = text_max - text_length;
    charCounts[this.getAttribute("name")].innerHTML = "Character count: " + text_length + "/" + text_max;
  }
}

＆＃13;

textarea {
  height: 300px;
  width: 600px;
  resize: none;
}

＆＃13;

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

＆＃13;

Answer 3

你应该将你的textareas包在一个组中，这样你就不必依赖兄弟姐妹......

在这里小提琴：https://jsfiddle.net/hntmxLxu/

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]);
    }
});

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计算textarea中键入字符的数量？

3 个答案: