使用javascript显示文本框的剩余字符[重复]答案

【问题标题】：Show remaining characters for a text box using javascript [duplicate]使用javascript显示文本框的剩余字符[重复]
【发布时间】：2015-11-01 15:27:11
【问题描述】：

在不编辑 html 文件的情况下，我需要显示剩余的字符，最多 300 个字符。

<form>
    <fieldset>
        <div class="formRow clearfix">
            <span>
                <label for="comments">Comments</label>
                <label for="comments" id="charsLeft">(300)</label>
            </span>
            <textarea name="comments" id="comments" rows="4" cols="40"></textarea>
        </div>
    </fieldset>
</form>

我已经准备好了一个函数，但我不知道该函数中有什么才能让它工作。

$(document).ready(function () {
    var text_max = 300;
    $('#charsLeft').html(text_max);

    $('#textarea').keyup(function() {
        var text_length = $('#textarea').val().length;
        var text_remaining = text_max - text_length;

        $('#charsLeft').html(text_remaining);
    });
});

我已经搜索了互联网和其他解决方案以尝试解决此问题，但似乎无法使其正常工作。任何帮助表示赞赏。

【问题讨论】：

您应该编辑您的问题以显示您目前拥有的功能。一般来说：（a）每当用户更改文本框时，您应该运行一个函数，（b）该函数应该找出文本框中有多少个字符，（c）并执行计算，然后（d）更新页面上的另一个区域以显示结果。您具体在哪一部分遇到了问题？
您的标记也无效。你有一个没有打开的关闭字段集。
看这个：stackoverflow.com/questions/19962608/javascript-character-count
在<textarea> 和<label> 存在之后，为相关的事件添加一个事件监听器，其中handler 查看.value.length 并执行所需的操作
请注意，您可能希望在您的 <textarea> 上添加一个 maxlength 属性，以添加客户端、无脚本的最大值执行（但也要在服务器上检查它） .

标签： javascript html

【解决方案1】：

你可以这样做

var holder = document.getElementById("charsLeft");
var commentsInput = document.getElementById("comments");

function updateRemainingCharacters() {

    var charsLeft = 300 - commentsInput.value.length;
    holder.innerText = "(" + charsLeft + ")";

}

commentsInput.addEventListener('keyup', updateRemainingCharacters);
commentsInput.addEventListener('paste', updateRemainingCharacters);

【讨论】：