使用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/

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

请让我再知道如果我错过了anythig，但低于应该帮助:)

您可以始终把支票上的长度进行限制。

代码

$('#myInput').keyup(function() { 
    $('#charCount').text(this.value.replace(/{.*}/g, '').length); 
});​ 

HTML

<textarea id="myInput"></textarea> <br> 
Counter: <span id="charCount"></span>​ 

Answer 2

你的代码中有许多语法错误。 现在试试这个：

$(document).ready(function() { // bracket was missing here... 
    var $texts = $('textarea[maxlength]'); 
    $texts.each(function() { // bracket was missing here... 
     var $this = $(this), // incorrect variable declaration here... 
     max = $this.attr('maxlength'), 
     textId = $this.attr('id'), // incorrect method call here... 
     $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", // missing comma here... 
      marginTop: "5px", // missing comma here... 
      marginBottom: "10px" 
     }).addClass('readOnly').appendTo($div); 

     $this.on({ 
      keyup: function() { 
       var val = $this.val(), 
       countVal = $('#' + countId).val(); // must have semicolon here... 
       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() { 
       var 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); 
       } 
      } 
     }); 
    }); 
}); 

http://jsbin.com/uzohuv/3

Answer 3

你应该通过

http://www.mediacollege.com/internet/javascript/form/limit-characters.html

限制charecters在文本区域

一个简单的方法来限制charecters数量是

<textarea maxlength="50"> 
Enter text here 
</textarea> 

更多的数据去

http://www.w3schools.com/html5/att_textarea_maxlength.asp