文本区域值计数长度jquery答案

【问题标题】：Textarea value count length jquery文本区域值计数长度jquery
【发布时间】：2015-02-01 05:34:16
【问题描述】：

我认为我遗漏了一些东西或有一个愚蠢的错误。我试图让计数器用于 textarea 并且由于某种原因 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");
    }
};

上面的代码总是将标签文本设置为“剩余 4000 个字符”，而不管我在 textarea 中输入的字符数。

【问题讨论】：

在哪里说WFRequest_ReqName 是textarea 的ID？你也可以发布渲染的html吗？
该元素的id 将匹配模型的属性名称，在本例中为Description，而不是txtDescription

标签： javascript jquery asp.net-mvc-4 textarea counter

【解决方案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');
        }
    });
});

【讨论】：

len = $.trim(elem.value).length; --> 这行得通 :) 非常感谢
太棒了！很高兴您发现这很有帮助。我删除了$.trim( )，因为在用户键入时，空格可能是用户文本的一部分。 var x=1, y=3, z=50; 是语法正确的代码；相当于var x=1; var y=3; var z=50;。

【解决方案2】：

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

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

而不是

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

【讨论】：