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

【问题标题】：Javascript - Display remaining characters of text areaJavascript - 显示文本区域的剩余字符
【发布时间】：2021-09-21 21:18:26
【问题描述】：

所以我将textarea 的maxlength 设置为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。有什么想法吗？

【问题讨论】：

有什么想法吗？你遇到了什么问题？
@Juhana 好吧，它不起作用。当我输入数字时不会改变，如果我在控制台中尝试alert(textArea);，它会说找不到变量。
不应该 textareaLengthCheck() 在 keypress 或 keyup 的 textarea 上吗？
当然它没有找到变量，因为它是函数的本地变量。
重复stackoverflow.com/questions/2136647/…

标签： javascript jquery

【解决方案1】：

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

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

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

看到这个JSFiddle。

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

【讨论】：

【解决方案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>

【讨论】：

事件监听器 onkeypress 不会在单击退格键时触发，因此如果用户删除他正在输入的 wat，剩余的字符将不正确。用 onkeydown 代替

【解决方案3】：

在 jquery 上，你可以这样做

$('#text-area').keyup(function() {
    if ($('#text-area').text().length < 200) {
        $('#characters-left').text('Characters left: ' + (200 - $('#text-area').text().length));
    }
});

【讨论】：