0

我正在尝试使用我在网上找到的代码片段来实现 charcount。它适用于单个文本区域。我有多个具有不同计数限制的文本区域。这是适用于一种形式的代码。

Javascript:
function countChar(val,count,focus){

        var len = val.value.length;
    var lim=count;
    var focussed=focus;

    if (len >= lim) {

            $('#charNum').text(lim - len);
            $('#charNum').addClass('exceeded');
        /* val.value = val.value.substring(0, lim);*/   
        }else {
        if(focussed===0){
            $('#charNum').html('<a>&nbsp;</a>');
        }
                else {
            $('#charNum').text(lim - len);
            $('#charNum').removeClass('exceeded');
        }
        }
};

HTML:
<div id='charNum' class='counter'>&nbsp;</div>
<textarea id='description' name='description'  onkeyup=\"countChar(this,200,1)\" onblur=\"countChar(this,200,0)\" rows='10' cols='20'></textarea>

如果我有两个文本区域，如何修改此代码才能工作？我知道如何在脚本中获取 div 的 id，但我不知道如何正确更新计数器 div，比如 #charNum1 和 #charNum2。欣赏一些提示。谢谢

编辑：我在想，如果有帮助，我可以将计数器 div 命名为“Charnum+divName”

4

2 回答 2

2

如果您使用 jQuery 附加事件处理程序，您可以this在处理程序中使用来引用触发事件的任何元素，从而避免在函数中硬编码元素 ID。

我建议添加一个允许的最大字符数的属性并删除内联事件处理程序：

<div id='charNum' class='counter'>&nbsp;</div>
<textarea id='description' name='description' data-maxChars="200" rows='10' cols='20'></textarea>
<div id='charNum2' class='counter'>&nbsp;</div>
<textarea id='otherfield' name='otherfield' data-maxChars="400" rows='10' cols='20'></textarea>

然后：

$(document).ready(function() {
    $("textarea[data-maxChars]").on("keyup blur", function(e) {
        var $this = $(this),
            $counter = $this.prev(),
            len = $this.val().length,
            maxChars = +$this.attr("data-maxChars");

        $counter.text(maxChars - len).toggleClass("exceeded", len > maxChars);
    });
});

演示：http: //jsfiddle.net/nnnnnn/GTyW3/

于 2012-08-15T03:54:51.073 回答
0

如果每个 textarea 都有自己的 div，您可以在 countChar 函数中添加一个额外的参数，该参数将是 div 的名称。所以你会有类似的东西：

function countChar(val,count,focus, charCountDiv)

然后，jQuery 不是在函数中硬编码它，而是：

$(charCountDiv)

那应该做我认为你想做的事情。

于 2012-08-15T03:52:49.487 回答