Просмотр поста

И еще одна фишка: индикатор оставшейся разрешенной длинны в полях ввода.

Вот jQuery код:

$('input.maxLengthIndicator, textarea.maxLengthIndicator').after('<div></div>').next().hide().end().keypress(
function (e){
  var currentLength = $(this).val().length; // Принимаем текущую длинну значения
  maxLength = $(this).attr('maxlength'); // Принимаем максимальную длинну значения
  if(!maxLength)
    maxLength = 9999; // Если максимальная длинна не указана берем 9999
  reminderLength = maxLength - currentLength; // Вычисляем оставшуюся разрешенную длинну
  if(currentLength >= maxLength)
  {
    if(e.which != 0 && e.which != 8)
    {
        e.preventDefault(); // Если длинна значения >= максимальной длинне значения и нажатая клавиша не Delete(0) и не Backspace(8), то не вставляем последний введенный символ
    }
  }
  $(this).next().show().text('Осталось ' + reminderLength + ' символов.'); // Выводим колличество оставшихся символов
});

Теперь индикатор оставшихся символов будет вставлятся после каждого поля инпут и текстареа с классом maxLengthIndicator. Например:

<input type="text" class="maxLengthIndicator" maxlength="100"/>

Примечание: Обязательно указывайте аттрибут maxlength, поскольку из него и берется максимальная длинна текста(если не указать, то будет взято 9999)

Теперь проанализируем код:

Сначала мы находим все поля input и textarea с классом maxLengthIndicator, вставляем после них пустой элемент <div></div>, скрываем его и возвращаемся обратно к текстовому полю.

keypress() -- это событие, которое происходит после того, как была нажата и отпущена клавиша.

Описание функции приведено в коде выше. Результат можно увидеть на скриншоте.