Question

我想我错过了什么或者有一个愚蠢的错误。我试图让计数器进入textarea＆amp;由于某种原因，textarea值的长度始终为零。以下是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");
    }
};

以上代码始终将标签文本设置为＆＃34;剩下4000个字符＆＃34;不管我在textarea里面输入的字符数。

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

Answer 2

您使用了错误的选择器。您的textarea ID为Description，但您使用了txtDescription。你应该使用

var len = $("#Description").val().length;

而不是

var len = $("#txtDescription").val().length;

Textarea值计数长度为jquery

2 个答案: