Сразу скажу, что мой вариант, это урезанная версия плагина Эмиля Шернемана (Emil Stjerneman), так что у вас всегда есть возможность воспользоваться альтернативным решением.
Но, к делу. Начнём с того, что нам понадобится использовать библиотеку jQuery. Как обычно:
Не вдаваясь в подробности, приведу код плагина с небольшими, в меру моего понимания, комментариями:
Как вы видите, код получился небольшим и в чем-то даже понятным. Лучше всего его поместить в отдельный файл, скажем maxlength.js. Осталось лишь инициировать действие плагина для TEXTAREA. Как таковой, это можно сделать по ID, классу или тегу. Я предпочитаю ID, как наиболее определённый. Выглядеть это может следующим образом:
Здесь просто дожидаемся загрузки документа и инициализируем наш плагим. Стоит также отметить, что вы можете прописать свои параметры для maxlength(). Сделать это можно, к примеру, следующим образом:
Нагло сперто вот отсюда
Но, к делу. Начнём с того, что нам понадобится использовать библиотеку 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 });
Нагло сперто вот отсюда
