使用javascript显示文本框的剩余字符

时间:2015-11-01 15:27:11

标签: javascript html5

如果不编辑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);
    });
});

我已经搜索了互联网和其他解决方案,试图解决这个问题,但似乎无法让它发挥作用。任何帮助表示赞赏。

1 个答案:

答案 0 :(得分:0)

你可以做这样的事情

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