Количество символов любого поля в форме может быть ограничено атрибутом "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". Такие простые действия сделают его динамическим и при вводе символов число будет автоматически уменьшаться.
На сегодня все! Комментарии приветствуются :).