Ограничитель количества символов в форме

Количество символов любого поля в форме может быть ограничено атрибутом "maxlength". Но он не работает для текстового поля. Что же делать в таком случае? Выход есть! И как всегда нам на помощь придет jQuery.

Демо версия находится тут. Файлы для скачивания здесь.

Достаточно поместить следующий код между тегами <head></head>:

<script language="javascript" src="Jquery.js"></script>
<script language="javascript">
function limitChars(textid, limit, infodiv)
{
var text = $('#'+textid).val();
var textlength = text.length;
if(textlength > limit)
{
$('#' + infodiv).html('Вам нельзя написать более чем '+limit+' символов!');
$('#'+textid).val(text.substr(0,limit));
return false;
}
else
{
$('#' + infodiv).html('У Вас осталось '+ (limit - textlength) +' символов.');
return true;
}
}
$(function(){
$('#comment').keyup(function(){
limitChars('comment', 20, 'charlimitinfo');
})
});
</script>

В начале кода мы подключаем фреймворк (помним про путь). А далее идет функция, которая и делает всю работу. Количество символов задается в команде "limitChars". В нашем примере это 20 символов. Вы можете поменять на любое значение. Кроме этого, в этой команде мы также прописываем ID нашего текстового поля, чтобы скрипт знал, что обрабатывать. В примере это "comment".

Теперь при оформлении текстового поля мы просто вставляем id="comment" в тег textarea:

<form name="test">
<h2>Ограничитель количества символов в форме</h2>
<div style="padding:10px">
<label>Напишите комментарий:</label><br />
<textarea name="comment" id="comment" rows="6" cols="50"></textarea><br />
<span id="charlimitinfo">У Вас осталось 50 символов.</span>
</div>

Также необходимо обратить внимание на текст под текстовым полем (который отображает количество оставшихся символов). Его неоходимо заключить в теги <span></span> и присвоить id="charlimitinfo". Такие простые действия сделают его динамическим и при вводе символов число будет автоматически уменьшаться.

На сегодня все! Комментарии приветствуются :).

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.ajaxray.com
Перевел: Максим Шкурупий
Урок создан: 13 Апреля 2009
Просмотров: 22969
Правила перепечатки


5 последних уроков рубрики "jQuery"

^ Наверх ^