Question

所以我正在编写我的第一个网站。我正在使用纯JavaScript。它的一部分是注释部分 - 存储在服务器上的SQL数据库中。我希望评论有一个最大长度。在搜索网络后，我找到了这个解决方案。请注意，这个解决方案远非完美。

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: 200px;
  height: 100px;
}

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

我发现很多类似的解决方案也使用jQuery。现在这个解决方案有两个主要缺陷。首先，它在输入新字符之前对字符进行计数，因为已注册的事件是keydown事件 - value.length将始终给出旧计数。其次，一旦你达到最大字符数量就会阻止所有用户输入 - 再也无法删除字符了。

将计数注册到keyup也无济于事 - 它无法阻止keydown事件的输入。

什么是比这更好的解决方案？

Answer 1

所以在玩了一下后我想出了这个解决方案。诀窍是将计数功能分成两部分 - 一部分用于计算字符，另一部分用于防止用户输入。在keydown上注册preventInput（），以便在输入之前阻止输入，并在keyup上注册count（），以便在函数中使用length的新值。

function preventInput(event) {
  if (event.target.id == 'commentText')
    var maxchar = 255;
  else
    var maxchar = 20;
  //I'm using target here, such that I can use this as a callback for different textfields
  var len = event.target.value.length;
  var key = event.keyCode || event.which;
  //prevent every input apart from UP, DOWN, LEFT, RIGHT and BACKSPACE
  if (len >= maxchar && (key != 8 && !(key >= 37 && key <= 40)))
    event.preventDefault();
}

function count(event) {
  //different lengths for different textfields
  if (event.target.id == 'commentText')
    var maxchar = 255;
  else
    var maxchar = 20;
  var len = event.target.value.length;
  //setting the remaining chars field depending whether Author or Text triggered the event
  document.getElementById("remain" + event.target.id.split('comment')[1]).innerHTML = 'Remaining characters:' + (maxchar - len);
  //disable the submit button when the user entered too many chars (CTRL + V)
  var btn = document.getElementById("submitBtn");
  if (len > maxchar)
    btn.disabled = true;
  else
    btn.disabled = false;
}

function setup() {
  //setting to events
  document.getElementById("commentAuthor").addEventListener("keydown", preventInput);
  document.getElementById("commentAuthor").addEventListener("keyup", count);
  document.getElementById("commentText").addEventListener("keydown", preventInput);
  document.getElementById("commentText").addEventListener("keyup", count);
  //initial count
  document.getElementById("remainAuthor").innerHTML += 20;
  document.getElementById("remainText").innerHTML += 255;
}

.charCounter {
  opacity: 0.4;
}

<body onload="setup()">
  <form>
    <fieldset style="display: inline-block;">
      <legend>Submit a comment</legend>
      Name:
      <input type="text" id="commentAuthor" name="Name:">
      <div class="charCounter" id="remainAuthor">Remaining characters:</div>
      <textarea name="comment" id="commentText" rows="4" cols="100"></textarea>
      <div class="charCounter" id="remainText">Remaining characters:</div>
      <br>
      <input type="submit" id="submitBtn" value="Submit Comment!">
    </fieldset>
  </form>
</body>

Answer 2

你可以修改第一个剪辑成这样的东西

＆＃13;

var maxchar = 160;
var i = document.getElementById("commentText");
var c = document.getElementById("remainText");
c.innerHTML = maxchar;

i.addEventListener("keydown", count);

function count(e) {
  var len = i.value.length;
  len >= maxchar ? i.value = i.value.slice(0,len-1) : c.innerHTML = maxchar - len - 1;
}

＆＃13;

<body onload="setup()">
  <form>
    <fieldset style="display: inline-block;">
      <legend>Submit a comment</legend>
      Name:
      <input type="text" id="commentAuthor" name="Name:">
      <div class="charCounter" id="remainAuthor">Remaining characters:</div>
      <textarea name="comment" id="commentText" rows="4" cols="100"></textarea>
      <div class="charCounter" id="remainText">Remaining characters:</div>
      <br>
      <input type="submit" id="submitBtn" value="Submit Comment!">
    </fieldset>
  </form>
</body>

＆＃13;

js中的字符计数器？

2 个答案: