要跨越的字符数的多个计数？

Question

我尝试将两个单独的最大字符字段添加到表单中，但没有成功。我尝试重命名元素 ID 并更改 var i 和 c 但无济于事。谢谢

这是代码。

var maxchar = 160;
var i = document.getElementById("textinput");
var c = document.getElementById("count");
c.innerHTML = maxchar;

i.addEventListener("keydown", count);

function count(e) {
  var len = i.value.length;
  if (len >= maxchar) {
    e.preventDefault();
  } else {
    c.innerHTML = maxchar - len - 1;
  }
}

textarea {
  display: block;
  width: 200 px;
  height: 100 px;
}

Remaining characters: <span id="count"></span>
<textarea id="textinput">
    </textarea>

Answer 1

委派和数据属性会有所帮助

window.addEventListener("load", function() {
  const container = document.getElementById("container")
  container.querySelectorAll("textarea").forEach(ta => ta.dataset.max = ta.dataset.cnt); // save 
  container.addEventListener("input", function(e) {
    const tgt = e.target;
    if (tgt.matches("textarea")) {
      const maxchar = +tgt.dataset.max;
      let cnt = +tgt.dataset.cnt;
      const c = tgt.previousElementSibling;
      cnt = maxchar - tgt.value.length;
      if (cnt < 0) {
        tgt.value = tgt.value.slice(0, maxchar);
        cnt = 0;
      }
      tgt.dataset.cnt = cnt;
      c.textContent = cnt;
    }
  })
})

textarea {
  display: block;
  width: 200 px;
  height: 100 px;
}

<div id="container">
  Remaining characters: <span class="count"></span><textarea id="textinput1" data-cnt="160"></textarea>
  <hr/> Remaining characters: <span class="count"></span><textarea id="textinput2" data-cnt="100"></textarea>
</div>

Answer 2

您 fiddle 中的问题是您声明了多个具有相同名称的变量。您声明 i 和 c 两次。您还声明了函数 count 两次。将这些变量的一半重命名为唯一的东西，它应该可以按照您的预期工作。

您可以在此 fiddle 中看到一个工作示例。

要跨越的字符数的多个计数？

Multiple count of numbers of characters to span?

html

jquery

character

count

max