Курилка.co.ua
Orphus RSS kurilka.co.ua

Category

Archives

jQuery плагин ограничения количества вводимых символов в textarea

Author wmas wmas | Category Category JavaScript

Здравствуйте, уважаемые читатели блога Курилка.co.ua. Тема с плагинами в jQuery мне определенно пришлась по нраву. Всего пару строк, и можно получить весьма интересный результат. Например, ограничить количество вводимых символов в TEXTAREA, т.е. используя JavaScript (и библиотеку jQuery) эмитировать действие атрибута maxlength.

Сразу скажу, что мой вариант, это урезанная версия плагина Эмиля Шернемана (Emil Stjerneman), так что у вас всегда есть возможность воспользоваться альтернативным решением.

Но, к делу. Начнём с того, что нам понадобится использовать библиотеку jQuery. Как обычно:

<script src="patch2/jquery.js" type="text/javascript"></script>

Не вдаваясь в подробности, приведу код плагина с небольшими, в меру моего понимания, комментариями:

<script type="text/javascript">
// создаём плагин maxlength
jQuery.fn.maxlength = function(options) {
  // определяем параметры по умолчанию и прописываем указанные при обращении
  var settings = jQuery.extend({
    maxChars: 10, // максимальное колличество символов
    leftChars: "character left" // текст в конце строки информера
  }, options);
  // выполняем плагин для каждого объекта
  return this.each(function() {
    // определяем объект
    var me = $(this);
    // определяем динамическую переменную колличества оставшихся для ввода символов
    var l = settings.maxChars;
    // определяем события на которые нужно реагировать
    me.bind('keydown keypress keyup',function(e) {
      // если строка больше maxChars урезаем её
      if(me.val().length>settings.maxChars) me.val(me.val().substr(0,settings.maxChars));
      // определяем колличество оставшихся для ввода сиволов
      l = settings.maxChars - me.val().length;
      // отображаем значение в информере
      me.next('div').html(l + ' ' + settings.leftChars);
    });
    // вставка информера после объекта
    me.after('<div class="maxlen">' + settings.maxChars + ' ' + settings.leftChars + '</div>');
  });
};
</script>

Как вы видите, код получился небольшим и в чем-то даже понятным. Лучше всего его поместить в отдельный файл, скажем maxlength.js. Осталось лишь инициировать действие плагина для TEXTAREA. Как таковой, это можно сделать по ID, классу или тегу. Я предпочитаю ID, как наиболее определённый. Выглядеть это может следующим образом:

<script type="text/javascript">
$(document).ready(function(){
  $("#textarea").maxlength();
});
</script>
<textarea id="textarea" style="width:100%; height:200px"></textarea>

Здесь просто дожидаемся загрузки документа и инициализируем наш плагим. Стоит также отметить, что вы можете прописать свои параметры для maxlength(). Сделать это можно, к примеру, следующим образом:

$('#textarea).maxlength({ maxChars: 160 });

На этом вроде всё. Спасибо за внимание.

Publish: Воскресенье Дек 14, 2008

3 Responses for "jQuery плагин ограничения количества вводимых символов в textarea"

feed for comments on this post

  • Комментарий #2262 author: Aleksey Reply
    publish: Вторник Апр 21, 2009 at 4:36 пп

    Пасиба! отличный топик, оч пригодился

  • Комментарий #2329 author: cmprssr Reply (subscribed to comments)
    publish: Пятница Июн 26, 2009 at 1:50 дп

    А можно сделать ограничение для вводимой латицы одно, а для русского текста другое? С помощью JavaScript :?:

  • Комментарий #2331 author: wmas Reply
    publish: Понедельник Июн 29, 2009 at 7:31 пп

    2cmprssr: hi! Наверное, можно сделать и это :roll: Например подсчитывая количество латиницы и кирилицы перебирая значение TEXTAREA, но честно говоря даже не могу представить зачем такое может понадобиться :oops:


Popular links

Copyright © since 2006 Курилка.co.ua,
powered by WordPress