Question

所以我将maxlength的{{1}}设置为200，我希望显示一个很好的倒计时功能，显示他们在输入时剩下的字符数。

我的HTML如下：

textarea

我试图用它做的JS是这样的：

<tr>
    <th width="20%" scope="row" valign="top">Description<div id="characters-left"></div></th>
    <td width="80%"><textarea id="text-area" style="width: 48%" name="poll-description" value="" maxlength="200"></textarea></td>
</tr>

我宁愿用vanilla javascript做这个，而不是jQuery，如果可能的话。有什么想法吗？

Answer 1

您可以像这样绑定keyup和keydown的事件侦听器。

var textarea = document.getElementById('text-area');

textarea.addEventListener('keyup', textareaLengthCheck, false);
textarea.addEventListener('keydown', textareaLengthCheck, false);

请参阅此JSFiddle。

或者您可以使用HTML5执行Rajesh suggested。

Answer 2

正如我所评论的，函数textareaLengthCheck应该是key事件。以下代码描述了相同的内容：

function textareaLengthCheck(el) {
  var textArea = el.value.length;
  var charactersLeft = 200 - textArea;
  var count = document.getElementById('lblRemainingCount');
  count.innerHTML = "Characters left: " + charactersLeft;
}

<textarea id="txtInput" onkeypress="textareaLengthCheck(this)"></textarea>
<p id="lblRemainingCount"></p>

Javascript - 显示文本区域的剩余字符

2 个答案: