使用 jQuery 的 TextArea 字符计数器

Question

我无法弄清楚为什么我的 JavaScript 无法正常工作。它与j Query一起使用，它应该选择所有文本区域标签，然后为每个文本区域计算在其中键入的字符数，然后在达到最大长度后不允许用户再输入，还显示字符计数器在每个文本区域框下。它所做的只是显示剩余的字符，但在按下每个键后不会递减，并且在达到最大长度时也不会停止。它也不会选择所有文本区域，它只选择找到的第一个文本区域。

这是我的 TextAreaCounter.js

$(document).ready(function){
var $texts = $('textarea[maxlength]');
$texts.each(function){
  $var $this = $(this),
  max = $(this).attr('maxlength'),
  textId = $(this)attr.('id'),
  $parent = $this.parent(),
  countId = textId+'-count';

$div = $('<div>Characters Remaining: </div>').addClass('count-down').insertAfter($this);
$input = $('<input></input>').attr({
    type:"text",
    readOnly: "readOnly",
    value: max,
    id: countId
    }).css({
      width: "25px"
      marginTop: "5px"
      marginBottom: "10px"
    }).addClass('readOnly').appendTo($div);

$this.on({
  keyup: function(){
    val = $this.val(),
    countVal = $('#'+countId).val(),
    if(val.length > max){ 
      $this.val(val.substr(0,max));
      alert('Max length exceeded: ' +max);
      return false;
    }else{
      $('#'+countId).val(max-val.length);
    }
  },
  blur: function(){
    val=$this.val();
    if(val.length > max){
      $this.val(val.substr(0,max));
      alert('Max length exceeded: ' +max);
      return false;
    }else{
      $('#'+countId).val(max-val.length);
    }
  }
});
});
});  

当我添加一些警报（未在此处的代码中显示）时，它表明它没有通过 keyup 事件到达 this.on 部分。我将此外部 js 文件包含到一个 jsp 文件中，我的页面是在该文件中创建的，并且其中包含我的文本区域。我还向 textarea 元素添加了 id 和 maxlength 属性。任何帮助都会非常感谢。

Answer 1

天哪 - 如果你能做到这一点，不知道为什么你需要上面的代码：http://jsfiddle.net/btyCz/

\n\n

有限演示 http://jsfiddle.net/jnXEy/（我已将限制设置为 20）随意玩玩。

\n\n

请让我知道我是否错过了任何内容，但以下内容应该有所帮助:)

\n\n

您始终可以检查长度以限制它。

\n\n

代码

\n\n

$(\'#myInput\').keyup(function() {\n    $(\'#charCount\').text( this.value.replace(/{.*}/g, \'\').length );\n});\xe2\x80\x8b\n

\n\n

超文本标记语言

\n\n

<textarea id="myInput"></textarea> <br>\nCounter: <span id="charCount"></span>\xe2\x80\x8b\n

\n