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

Question

所以我将maxlengthmy 的值设置textarea为 200，我想显示一个很好的倒计时功能，显示他们在输入时还剩下多少个字符。

我的 HTML 如下：

<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>

我尝试使用的 JS 是这样的：

<script>
    window.onload = textareaLengthCheck();

    function textareaLengthCheck() {
    var textArea = document.getElementById('text-area').value.length;
    var charactersLeft = 200 - textArea;
    var count = document.getElementById('characters-left');
    count.innerHTML = "Characters left: " + charactersLeft;
}
</script>

如果可能的话，我宁愿使用普通的 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 建议的操作。