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