更新单个函数的多个div的charcount

我想使用我在网上找到的代码片段来实现charcount。它适用于单个文本区域。我有不同数量限制的多个文本区域。以下是适用于单一表单的代码。更新单个函数的多个div的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。欣赏一些提示。由于

编辑：我在想，我可以说出柜台格为“Charnum + divName”如果这能帮助

来源

2012-08-15 aVC

您可能希望把一个关于input/char_count元素的html如何的示例 - 它们如何位于dom树中。 – 2012-08-15 03:52:40

@PiotrJakubowski html会看起来像这个或多或少。（this，200,1）\“onblur = \”countChar（this，200,0）\“rows = '10'cols ='count1' '20'>

– aVC 2012-08-15 03:56:14

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

我建议增加与最大允许的字符和删除内联事件处理程序的属性：

<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-15 03:54:51 nnnnnn

Thx中整个字符串表示的元素。作品，我修改了我想要的小错综复杂 – aVC 2012-08-15 05:04:24

如果每个文本域都将有它自己的DIV，你可以添加一个额外的参数countChar函数将是div的名称。所以，你必须是这样的：

function countChar(val,count,focus, charCountDiv)

然后，而不是在功能硬编码，jQuery的将是：

$(charCountDiv)

这应该做什么，我认为你正在寻找做。

来源

2012-08-15 03:52:49 jcern

是的。更具体地说，在函数中，我可以得到如var divID = val.id这样的id。现在，是否有可能使用$（divID +'CharNum'）。html（..？ – aVC 2012-08-15 03:59:04

）是的，它应该可以工作，它将搜索匹配$（） – jcern 2012-08-15 04:15:11

更新单个函数的多个div的charcount

回答

相关问题