文本区域值计数长度jquery

Posted 2023-05-07

【中文标题】文本区域值计数长度jquery

【英文标题】：Textarea value count length 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

【参考方案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;