Счетчик символов TextArea с использованием jQuery

Мне сложно понять, почему мой 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);
    }
  }
});
});
});

Когда я добавил некоторые предупреждения, не показанные здесь в коде, он показал, что он не попал в раздел this.on с событием keyup. Я включил этот внешний файл js в файл jsp, который был создан моей страницей, и имеет мои текстовые области. Я также добавляю атрибут id и maxlength в элемент textarea. Любая помощь будет большой благодарностью.

Ответ 1

Oh man - Donno, зачем вам нужен код выше, если вы можете это сделать: 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>

Ответ 2

Вы должны пройти

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

Ответ 3

В вашем коде много синтаксических ошибок. Попробуйте это сейчас:

$(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