Ограничитель количества символов в форме
Количество символов любого поля в форме может быть ограничено атрибутом "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
Просмотров: 23085
Правила перепечатки
5 последних уроков рубрики "jQuery"
-
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
-
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
-
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
-
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
-
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.