Делаем счетчик оставшихся символов для ввода

Здравствуйте. В этом уроке Вы вместе с нами займетесь созданием счетчика, который будет контролировать количество оставшихся символов для ввода в текстовое поле. Ниже Вы можете просмотреть пример получившегося счетчика, а также скачать необходимые файлы:

demosourse

Шаг 1. Подключение библиотеки jQuery и плагина Limit

Первым делом нам нужно подключить библиотеку jQuery и плагин Limit, без которого правильная работа счетчика невозможна. Делаем это, вставляя следующий код между тегами <head> и </head>:


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.limit.js"></script>

Шаг 2. Стилизация текстового поля.

Теперь необходимо немного приукрасить наше текстовое поле, придать ему несколько стилей. Вы можете заняться дизайном сами или хотя бы немного изменить мои исходные стили, которые находятся в файле style.css. Вам всего лишь остается подключить его в верхней части Вашей страницы следующим образом:


<link href="style.css" rel="stylesheet" type="text/css" media="all" />

Шаг 3. Каркас текстового поля.

Далее создадим простую текстовую область (Textarea) и придадим ей все использовавшиеся нами стили:


<div class="form"> 			
<p>			
<span class="w"> 					
<textarea class="input"></textarea>                     
<br>					
<span id="charsLeft"></span>&nbsp;знаков осталось.				
</span> 			
</p> 		
</div> 

Шаг 4. Вставка основного jQuery-кода.

В этом, последнем шаге нам всего лишь остается разместить jQuery-код, который будет играть основную роль в работе нашего счетчика символов. Следующий код Вам нужно будет вставить перед закрытием тега body:


<script type="text/javascript">			
$(document).ready(function(){				
$('textarea').limit('100','#charsLeft');			
});		
</script> 

Заключение.

На этом я заканчиваю урок. Если вдруг возникнут какие-либо вопросы, задавайте их в комментариях! ;-) До новых встреч!

С искренним уважением, Максим Курочкин

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.unwrongest.com
Перевел: Максим Курочкин
Урок создан: 19 Июля 2009
Просмотров: 29646
Правила перепечатки


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

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 19 Июля 2009 10:36
    МихаилГорюнов
    Помоему что-то подобное уже было...
  • 19 Июля 2009 11:06
    МаксимКурочкин
    МихаилГорюнов: Возможно Вы ошибаетесь, поскольку из подобных был только подсчет введенных слов в форму, а это, практически, разные вещи...
  • 19 Июля 2009 11:44
    demon
    Неее. Это точно уже было!
  • 19 Июля 2009 13:11
    frol
    Было-было, похожее... http://www.ruseller.com/lessons.php?rub=32&id=147
  • 19 Июля 2009 14:22
    Серега
    и совсем не похожее.... а один в один... нафига такое делать... 50 мини уроков на сайте, а запомнить не могут...
  • 19 Июля 2009 16:10
    МаксимКурочкин
    Извините, этот урок я как раз и не заметил, спасибо ,frol, за подсказку! Всем: Ребят, я проверил, мой урок абсолютно не плагиат, а наоборот в нем меньше кода, что конечно же облегчает загрузку всех скриптов. Считаю, что мой урок еще уникальнее и актуальнее, чем предыдущий. И еще, напоследок, старайтесь, прежде чем говорить о копии урока, сравнивать коды этих уроков. Удачи!) А теперь я хотел бы обратиться лично к Сереге. Вы что здесь самый умный? Почему хамите администратору? Привыкли чисто смотреть демки уроков и воровать готовые исходники? Если такой умный, опубликуйте хоть один урок, а мы над Вами дружно посмеемся xDD. +уберите с аватара рекламу своего сайта, не то бессрочный бан за все сразу! Спасибо за внимание!
  • 19 Июля 2009 16:30
    Sonic
    Отличие этого урока ещё в том что программа не дает возможность допечатать в то время в прошлом уроке можно было дописать слово а оно потом удалялось. Этот урок мне понравился больше, но хочу спросить автора. Как сделать на двух полях сразу, но с разным количеством символов ограничения?
  • 19 Июля 2009 17:33
    МаксимКурочкин
    Sonic: Я думаю Вам следует сначала скопировать все то, что у Вас до этого было между тегами body и вставить ниже . Затем, в этой копии, нужно найти идиентификатор charsLeft в двух местах и заменить его, например, на charsLeft2, а также поменять количество разрешенных символов в java-скрипте 100 на то, которое вам нужно. Специально для Вас, если Вы не поняли вот, выкладываю архив где используется две текстовых области и к каждой из них разное кол-во разрешенных символов для ввода: http://ruseller.com/lessons/les343/limit-signs2.zip
  • 19 Июля 2009 20:57
    AtonS
    Я думая, что проще и менее загруженее будет сделать это на Java Scripts - Просто между head вставить <script type="text/javascript"> function limitText(limitField, limitCount, limitNum) { if (limitField.value.length > limitNum) { limitField.value = limitField.value.substring(0, limitNum); } else { limitCount.value = limitNum - limitField.value.length; } } </script> Тегу textarea задать атрибут onkeydown='limitText(this,this.form.count,100);' onkeyup='limitText(this,this.form.count,100);' А там где вывести подсчет Символов осталось: <input readonly style='border:0px;' type='text' name='count' size='3' value='1000'/> Пользуйтесь на здоровье
  • 20 Июля 2009 01:55
    Серега
    МаксимКурочкин, не знаю чем я так Вас обидел???:) Вы и Патин сдесь делаете нормальные уроки, про Шкарупия я молчу. возможно они и разные... можно было бы объединить... уже не один урок "новых авторов" удалялся с сайта по причине идентичных уроков... неужели я могу запомнить десяток уроков, а авторы уроков нет... короче, не надо меня удалять, утруждаться, просто подскажите как это сделать самому, должно же как нибудь... "клянусь" больше не регистрироваться и не надоедать своим присутствием.
  • 20 Июля 2009 02:33
    Шмит
    Максим Курочкин, не позорь сайт Попова и помалкивай, из-за таких как ты теряется интерес к ресурсу.
  • 20 Июля 2009 02:34
    Шмит
    Серега, и не делает он нормальные уроки, нормальные уроки делает только Попов.
  • 20 Июля 2009 09:49
    МаксимКурочкин
    Серега, да не пугайтесь Вы так, просто знаете, уже накипело...хамят здесь на сайте разные, что-то им не так, да не этак, можно спокойно, нормально объяснить я с Вами посоветуюсь и мы решим проблему, а не орать в комментариях... Шмит, Вы понимаете, что идете, в данный момент против самого себя?
  • 20 Июля 2009 11:47
    frol
    Можно я дам Вам всем совет? Не обращайте Вы внимания на злобные комментарии, пропускайте их мимо ушей и всем будет легче... Вы видели, чтоб хоть раз Попов отвечал на какие-то оскорбления в комментах? Если надо, его защитят благодарные посетители... Не место это для выяснения отношений...
  • 20 Июля 2009 14:17
    АндрейЖданов
    МаксимКурочкин, я против тебя ничего не имею, просто то, что ты явяляешься администратором данного ресурса не даёт тебе право так с ним разговаривать, за что удалять? За то что на аве ссылка?! ДА посмотри вот сюда http://ruseller.com/lessons.php?rub=30 в каждом комментарии пиар своего сайта. Всего хорошего.
  • 20 Июля 2009 14:17
    АндрейЖданов
    Шмит = Андрей Жданов
  • 20 Июля 2009 22:14
    Sonic
    МаксимКурочкин, спасибо большое
  • 21 Июля 2009 01:27
    Sonic
    МаксимКурочкин, столкнулся ещё с одной проблемой. Если например у нас два а то и три input будут, то как быть? Ведь кнопка это тотже input.
  • 22 Июля 2009 08:58
    TRAHOMOTO
    Господа просто охренеть!)) Скоро саты будут писаться 1-2 функциями ^_^ Спасибо!
  • 22 Июля 2009 09:03
    TRAHOMOTO
    Да кстати! Когда наконец вы "прикрутите" mod_rewrite к "Руселлеру"? 30 минут возни и ссылочки станут как конфетки
  • 30 Июля 2009 16:51
    deloest
    Спасибо Максим, отличный урок!!
  • 23 Сентября 2009 11:48
    atbserg
    В случае если вписывать слова в поле ввода а потом обновить страницу счетчик символов исчезает - вот такой вот у этого плагина БАГ !!!!!!
  • 20 Ноября 2009 23:24
    Ptizin
    А как сделать чтобы надо было написать НЕ меньше чем определенное кол-во символов? Не ограничивать, а наоборот чтобы побольше писали, а пока не напишут деактивировать кнопу "Submit" например.
    • 7 Января 2011 10:45
      demix
      Так можно сделать скрытый див с кнопкой, а пока не будет набрано определенное количество символов, див не открывать.
  • 9 Января 2010 07:45
    gexusa
    А как добавить проверку через php тут ?
  • 30 Ноября 2010 15:58
    iman_99
    МаксимКурочкин Уроки у вас отличные, спору нету. А порядок наводить надо, поодерживаю полностью Можно и баном и временной блокировокй, ну вам лучше знать))))
  • 7 Марта 2011 20:23
    torres94
    Спасибо, очень пригодилось.
  • 22 Июня 2011 11:12
    KostyaKoz
    На Твиттер похоже)
  • 24 Апреля 2014 14:52
    ХабибОмаров
    А можно сделать так чтоб при введении максимальных символов строка внизу была красной и показывала обратный счет с минусом а в поле чтоб можно было и дальше печатать
  • 15 Октября 2015 21:28
    bazilio100lei
    Как можно докрутить в скрипт и минимальное ограничение? Например в поле можно написать минимум 1500 символов и максимум 3000? Возможно ли расширить логику скрипта?
^ Наверх ^