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

Question

我尝试向表单添加两个单独的最大字符字段失败。我尝试重命名元素 id 并更改 var i 和 c 但无济于事。谢谢

小提琴 http://jsfiddle.net/rLkcy0t4/

这是代码。

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

你的小提琴中的问题是你声明了多个具有相同名称的变量。您声明 i 和 c 两次。您还声明了函数 count 两次。将其中一半变量重命名为唯一的名称，它应该按照您期望的方式工作。

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