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

Количество символов любого поля в форме может быть ограничено атрибутом "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"

^ Наверх ^