javascript - jquery 文本区域值计数长度

Question

我认为我遗漏了一些东西或者犯了一个愚蠢的错误。我试图让计数器用于文本区域，并且由于某种原因，文本区域值的长度始终为零。这是我的 View 相同的代码:

@Html.TextAreaFor(x => x.Description, new { @maxlength = "4000", @onkeyup = "countChar(this)" })
@Html.Label("", " ", new { @id = "lblcount" })

我对应的javascript是:

function countChar(val) {
    var max = 4000;
    var len = $("#txtDescription").val().length;
    if (len >= max) {
        $('#lblcount').text(' you have reached the limit');
        $('#lblcount').attr("class", "lblCountRed");
    } else {
        var ch = max - len;
        $('#lblcount').text(ch + ' characters left');
        $('#lblcount').attr("class", "lblCountGreen");
    }
};

无论我在文本区域内输入多少字符，上述代码始终将标签文本设置为“剩余 4000 个字符”。

Answer 1

我真的不建议您使用内联 JavaScript，但函数应该是这样的:

function countChar( elem ) {
    var max = 4000,
        len = elem.value.length,
        lbl = $('#lblcount');
    if(len >= max) {
        lbl.text(' you have reached the limit')
        .addClass("lblCountRed").removeClass('lblCountGreen');
    } else {
        var ch = max - len;
        lbl.text(ch + ' characters left')
        .addClass("lblCountGreen").removeClass('lblCountRed');
    }
}

如果您想在不使用内联 JavaScript 的情况下完成此任务，您可以:

• 删除@onkeyup = "countChar(this)"
• 然后使用以下代码:

-

$(document).ready(function() {
    $("#Description").on('keyup', function() {
        var max = 4000,
            len = this.value.length,
            lbl = $('#lblcount');
        if(len >= max) {
            lbl.text(' you have reached the limit')
            .addClass("lblCountRed").removeClass('lblCountGreen');
        } else {
            var ch = max - len;
            lbl.text(ch + ' characters left')
            .addClass("lblCountGreen").removeClass('lblCountRed');
        }
    });
});