Динамический счет символов в полях формы при помощи jQuery

счет символов

От автора: наверное, каждый веб-разработчик сталкивался с таким термином, как юзабилити. Если попробовать доступно объяснить значение этого термина несколькими словами, то можно сказать, что это удобство использования чего-то пользователем. Применительно к веб-приложениям — это будет, соответственно, удобство использования пользовательских интерфейсов.

В этом уроке мы научимся делать такую вещь, как подсчет количества символов, введенных пользователем в то или иное поле формы. Думаю, такую вещь Вам уже доводилось видеть на различных сайтах. Зачастую мы ограничиваем (клиентскими или серверными методами) количество символов, введенное, к примеру, в текстовую область. И, как по мне, пользователю будет гораздо удобнее заполнять это поле, если он будет знать, сколько же именно символов он уже набрал и сколько еще сможет набрать.

Кстати, мы реализуем оба варианта этой полезности — мы не только будем показывать сколько символов введено, но и сколько еще можно ввести… При этом все будет отображаться динамически и может быть применено к различным полям формы. Итак, приступим.

автор

Автор: Андрей Кудлай

Зовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP. Немного разбираюсь в JavaScript’e — в свободное время как раз занимаюсь его изучением.

Время ролика: 45:53

Ссылка для скачивания исходников: Скачать исходники

Ссылка для скачивания всего архива (видео+исходники): Скачать одним архивом. Размер: 82,2 mb.

1. Немного теории

В общем-то, весь урок посвящен работе с jQuery, поскольку HTML и CSS, я думаю, у Вас не должен вызывать особых вопросов. Но, все же, давайте немного пройдемся по структуре кода HTML и CSS стилей.

<form>
<table>
	<tr>
		<td>Имя: </td><td><input type="text" name="name" maxlength="5" class="limitInput" /></td>
	</tr>
	<tr>
		<td>e-mail: </td><td><input type="text" name="mail" maxlength="5" class="limitInput" /></td>
	</tr>
	<tr>
		<td>Текст: </td><td><textarea name="text" cols="30" rows="5" id="limitInput"></textarea></td>
	</tr>
</table>
</form>
<p><span id="typeChars"></span></p>
<p><span id="leftChars"></span></p>

Здесь мы видим обычную форму с двумя текстовыми полями и текстовую область.

Стоит обратить внимание на атрибуты maxlength у текстовых полей. Эти атрибуты призваны ограничивать кол-во вводимых символов в поле. Я установил значением этих полей 5 — это, конечно же, мало, но для удобства тестирования — в самый раз. Также текстовым полям назначен класс limitInput, а текстовой области присвоен идентификатор limitInput — это сделано для более простого отбора данных элементов в набор jQuery (об этом далее).

Под формой выводятся два блока span, в которые как раз и будут выводиться динамические сообщения: в первый span будет выводиться кол-во уже введенных символов, во второй — количество символов, которые еще можно ввести.

И немного стилей — я их не стал выносить в отдельный файл, поскольку их действительно немного:

<style type="text/css">
	.type{
		border: 1px solid red;
	}
	#typeChars, #leftChars{
		border: 1px solid #ccc;
		padding: 0 5px;
	}
</style>

Класс type создан для того, чтобы подсвечивать поле, если достигнут лимит символов для этого поля. Правила для идентификаторов typeChars и leftChars — это стили span’ов. Также, так как мы будем работать с jQuery, — нам понадобится эта библиотека. Ее Вы найдете в дополнительных материалах к уроку (файл jquery.js) или можете скачать на сайте http://jquery.com/.

Думаю, что с HTML и CSS вопросов нет.

Теперь немного теоретических моментов по работе с jQuery. В принципе, эту тему я уже затрагивал в уроке «FAQ с использованием PHP-MySQL-jQuery», но, все же, давайте проговорим некоторые моменты еще раз. Прежде всего, сам принцип работы фреймворка. Работу с ним можно разделить на 3 этапа:

отбор элементов и формирование «набора jQuery» (выборки);

отслеживание событий, которые происходят с отобранными элементами;

реакция на событие.

Основа основ работы с jQuery как раз и заключена в первом пункте — отбор элементов, с которыми мы будем работать. Как же мы можем отобрать эти элементы. Все просто — для этого достаточно знаний CSS… Разработчики не стали выдумывать новый синтаксис для фреймворка и для формирования выборки использовали синтаксис CSS.

Давайте теперь попробуем разделить нашу задачу на указанные 3 этапа.

1. Отбор элементов и формирование «набора jQuery» (выборки).

Итак, что же мы будем отбирать? Из каких именно элементов будет формироваться jQuery-объект? Конечно же, это будут те элементы, с которыми будет происходить работа — это поля формы, текстовая область и блоки span. Каким образом мы можем отобрать их в набор? Как уже упоминалось, для этого нам достаточно знаний CSS. Например, для того, чтобы отобрать текстовые поля формы — нам достаточно написать такую строку кода:

$('.limitInput');

Готово.

Ничего сложного и непонятного нет. Мы просто взяли в набор все элементы с классом limitInput. Для того, чтобы отобрать текстовую область, у которой имеется идентификатор с аналогичным именем — мы укажем не клас, а идентификатор, т.е., так:

$('#limitInput');

Также ничего сложного нет. С первым пунктом, думаю, понятно. Теперь второй этап.

2. Отслеживание событий, которые происходят с отобранными элементами.

Какое событие нас будет интересовать? Событие ввода символа в соответствующее поле. Т.е., если пользователь установил курсор в соответствующее поле и нажал клавишу на клавиатуре — это событие, причем то событие, которое как раз и интересует нас.

Ну и третий этап:

3. Реакция на событие.

Как Вы, наверное, уже догадались, реакцией на событие будет динамическое обновление блоков span. C каждым событие (с каждым вводом символа в поле) мы будем реагировать соответствующим образом — считать сколько символов на данный момент в поле ввода и сколько символов еще там может быть введено. Вот и все — ничего сложного нет. С основными теоретическими моментами мы закончили и при этом построили своеобразный алгоритм решения нашей задачи… осталось его реализовать.

2. Пишем функционал jQuery

Первым делом мы подключаем библиотеку jQuery:

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

и открываем конструкцию JavaScript для написания в ней кода:

<script type="text/javascript"></script>

А теперь внутри этой конструкции мы пропишем стандартную функцию jQuery, определяющую готовность документа:

<script type="text/javascript">
	$(document).ready(function(){
	
	});
</script>

Здесь мы прописали событие ready(), в которое поместили весь остальной код. Это сделано для того, чтобы этот код выполнялся только после того, как будет полностью сформировано DOM-дерево или, говоря проще, — после того, как полностью будет загружена страница. Для знакомых с английским эта строка кода интуитивно понятна — после того, как будет готов (ready — готово) документ — выполним все необходимое, т.е., тот блок кода, который заключен в операторные скобки.

Далее мы пройдемся по сформулированным выше трем этапам. Итак, для начала мы будем работать с текстовыми полями, а потому отберем их в набор:

<script type="text/javascript">
	var max = 5; // максимум символов 
	$(document).ready(function(){
		$('.limitInput');
	});
</script>

Также мы создали переменную max, которой присвоили значение максимального количества символов.

Теперь мы должны отслеживать события связанные с набором jQuery. Для этого мы будем использовать событие keyup() — это событие наступает после того, как пользователь отпускает клавишу клавиатуры. В jQuery есть еще несколько событий, связанных с клавиатурой, например, keydown(), keypress(). Они, в принципе, также могут быть использованы при реализации нашей задачи. Добавим событие keyup() к объекту jQuery:

<script type="text/javascript">
	$(document).ready(function(){
		$('.limitInput').keyup(function(){
		
		});
	});
</script>

Также мы повесили на прописанное событие функцию, в которой как раз и опишем то, что будет происходить после события — это и будет 3-им этапом работы, т.е., реакция на событие. В качестве реакции мы должны выводить 2 результата — кол-во набранных символов и кол-во символов, которые еще можно ввести. Каким образом мы сможем получить эти значения? Первое значение можно получить, если взять значение текущего поля (поля, в которое происходит сейчас ввод, т.е., поля, в котором установлен фокус) и после этого узнать его длину. Полученное значение и будет количеством символов в текущем поле. Второе значение узнать еще проще — достаточно от лимита символов (он у нас в переменной max) отнять первое значение (кол-во введенных символов). Разница и будет искомым значением. Таким образом, нам понадобится 2 переменные, в которые и будут помещаться оба значения.

Получаем первое значение:

<script type="text/javascript">
	$(document).ready(function(){
		$('.limitInput').keyup(function(){
			var count = $(this).val().length(); // кол-во уже введенных символов
		});
	});
</script>

Давайте теперь разберем эту строку кода:

$(this) — это указатель на текущий элемент, т.е., тот элемент, в котором произошло событие;

val() — этот метод позволяет получить значение атрибута value у текущего элемента;

length() — ну а этим методом мы получаем уже длину значения текущего элемента.

Для знакомых с английским здесь все интуитивно понятно. Полученное значение мы пометили в переменную count. Второе значение, как уже отмечалось, получить еще проще:

<script type="text/javascript">
	$(document).ready(function(){
		$('.limitInput').keyup(function(){
			var count = $(this).val().length(); // кол-во уже введенных символов
			var num = max - count; // кол-во символов, которое еще можно ввести
		});
	});
</script>

Теперь полученные значения мы можем выводить в блоки span. Для этого мы можем отобрать их в набор по идентификаторам и вывести в них нужный нам текст. Но делать это мы будем по условию. Помним, что у нас есть клас type, который отвечает за подсвечивание поля, если достигнут лимит символов. Также во втором span’e мы будем менять текст, если достигнут лимит символов. Например, если лимит не достигнут, то мы выводим количество символов, которое еще можно ввести, а иначе — выводим текст «Достигнут лимит символов». Как можно построить условие? Достаточно проверить больше ли значение переменной num чем ноль. Если больше, значит лимит не достигнут, а иначе — достигнут лимит символов. Прописываем условие:

<script type="text/javascript">
	$(document).ready(function(){
		$('.limitInput').keyup(function(){
			var count = $(this).val().length(); // кол-во уже введенных символов
			var num = max - count; // кол-во символов, которое еще можно ввести
			
			if(num > 0){
				// если не достигнут лимит символов
			}else{
				// если достигнут лимит символов
			}
		});
	});
</script>

Замечательно!

Осталось взять в набор блоки span и вывести в них значения переменных. Добавлять текст в объекты jQuery можно при помощи метода text(), а в качестве параметров мы как раз и укажем текст, который нужно выводить.

<script type="text/javascript">
	$(document).ready(function(){
		$('.limitInput').keyup(function(){
			var count = $(this).val().length(); // кол-во уже введенных символов
			var num = max - count; // кол-во символов, которое еще можно ввести
			
			if(num > 0){
				// если не достигнут лимит символов
				$('#typeChars').text('Введено символов: ' + count);
				$('#leftChars').text('Можно ввести символов: ' + num);
			}else{
				// если достигнут лимит символов
				$('#typeChars').text('Введено символов: ' + count);
				$('#leftChars').text('Достигнут лимит символов');
			}
		});
	});
</script>

Если условие выполняется: выводим в первый блок текст и значение переменной count, а во второй — текст и значение переменной num. Если условие не выполняется (блок иначе): выводим в первый блок текст и значение переменной count, а во второй — текст «Достигнут лимит символов».

Теперь к текущему элементу, если не выполняется условие (т.е., если достигнут лимит символов), мы добавим класс type (подсветим текущее поле). Сделать это можно при помощи метода addClass(). Также, чтобы поле не подсвечивалось, если пользователь удалил символ в поле, в котором достигнут уже был лимит, мы должны будем удалять класс type если условие выполняется:

<script type="text/javascript">
	$(document).ready(function(){
		$('.limitInput').keyup(function(){
			var count = $(this).val().length(); // кол-во уже введенных символов
			var num = max - count; // кол-во символов, которое еще можно ввести
			
			if(num > 0){
				// если не достигнут лимит символов
				$('#typeChars').text('Введено символов: ' + count);
				$('#leftChars').text('Можно ввести символов: ' + num);
				$(this).removeClass('type');
			}else{
				// если достигнут лимит символов
				$('#typeChars').text('Введено символов: ' + count);
				$('#leftChars').text('Достигнут лимит символов');
				$(this).addClass('type');
			}
		});
	});
</script>

Вот и все.

Мы реализовали задачу, которую ставили перед собой в начале урока. На этом можно было бы и остановиться… Но, если посмотреть, то мы увидим, что наш код не совсем универсален. Ведь для того, чтобы теперь применить его к текстовой области, мы должны будем продублировать написанный код, изменяя при этом отбираемый элемент — вместо класса limitInput нужен идентификатор limitInput -, а также изменяя лимит символов — для текстовой области это значение, конечно же, будет на порядок выше. Для того, чтобы наш код приобрел универсальность, мы создадим функцию, в которую и поместим написанный код.

3. Создаем функцию

Для создания функции мы вырежем весь код внутри блока ready(), исключая строку с переменной max (ее мы будем передавать параметром функции), и поместим код внутри функции, которую назовем limitChars. Саму функцию можно создать перед блоком ready():

<script type="text/javascript">	
	// Функция подсчета количества символов	- START
	function limitChars(){
		$('.limitInput').keydown(function(){
			var count = $(this).val().length; // кол-во уже введенных символов
			var num = max - count; // кол-во символов, которое еще можно ввести
			
			if(num > 0){
				// если не достигнут лимит символов
				$('#typeChars').text('Введено символов: ' + count);
				$('#leftChars').text('Можно ввести символов: ' + num);
				$(this).removeClass('type');
			}else{
				// если достигнут лимит символов
				$('#typeChars').text('Введено символов: ' + count);
				$('#leftChars').text('Достигнут лимит символов');
				$(this).addClass('type');
			}
		});
	}
// Функция подсчета количества символов - END
	
	$(document).ready(function(){
		
	});
</script>

Теперь определимся с параметрами, которые будут подаваться на вход функции — у нас их будет 4:

объект, который отбирается на первом этапе, т.е., поля формы, в которые вводятся символы;

максимальное количество символов для ввода;

блок, в который выводиться информация о количестве введенных символов;

блок, в который выводиться информация о количестве символов, которое еще можно ввести.

Теперь пропишем эти параметры в качестве аргументов функции и в самой функции (для этого просто заменим значения на их аргументы):

<script type="text/javascript">	
	// Функция подсчета количества символов	- START
	function limitChars(myObject, max, typeChars, leftChars){
		$(myObject).keydown(function(){
			var count = $(this).val().length; // кол-во уже введенных символов
			var num = max - count; // кол-во символов, которое еще можно ввести
			
			if(num > 0){
				// если не достигнут лимит символов
				$(typeChars).text('Введено символов: ' + count);
				$(leftChars).text('Можно ввести символов: ' + num);
				$(this).removeClass('type');
			}else{
				// если достигнут лимит символов
				$(typeChars).text('Введено символов: ' + count);
				$(leftChars).text('Достигнут лимит символов');
				$(this).addClass('type');
			}
		});
	}
	// Функция подсчета количества символов - END
	
	$(document).ready(function(){
		
	});
</script>

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

$(document).ready(function(){
	var myObject = '.limitInput'; // объект, у которого считаем символы
	var max = 5; // максимум символов
	var typeChars = '#typeChars'; // куда выводим кол-во введенных символов
	var leftChars = '#leftChars'; // куда выводим кол-во оставшихся символов
		
	limitChars(myObject, max, typeChars, leftChars);
});

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

$(document).ready(function(){
	var myObject = '.limitInput'; // объект, у которого считаем символы
	var max = 5; // максимум символов
	var typeChars = '#typeChars'; // куда выводим кол-во введенных символов
	var leftChars = '#leftChars'; // куда выводим кол-во оставшихся символов
		
	limitChars(myObject, max, typeChars, leftChars);
	limitChars('#limitInput', 10, typeChars, leftChars);
});

Во втором вызове мы указали, что необходимо взять в набор элемент с идентификатором limitInput (это текстовая область) и указали максимум символов 10 (это мало для текстовой области, но для удобства тестирования кода — достаточно). Как видим, теперь нам не нужно дублировать код — достаточно вызвать функцию с нужными параметрами.

Заключение

В конце хотелось бы сказать несколько слов о том, что не следует забывать, что написанный код служит исключительно для улучшения юзабилити создаваемого веб-интерфейса (например, формы обратной связи). Не стоит забывать, что данные из формы легко подделать, а потому на стороне сервера всегда нужно проверять, сколько же символов мы в действительности получили от пользователя и лишнее — обрезать.

На этом урок закончен. Если какие-либо моменты были недостаточно освещены, то я с удовольствием постараюсь ответить на Ваши вопросы в комментариях к данному уроку.

Приятного Вам сайтостроения!

киберсант-вебмастер

Автор: Кудлай Андрей

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

E-mail: contact@webformyself.com

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (20)

  1. Webchester

    Качество видео очень плохая.

    • Виктор Рог

      Предельно достаточно для понимания.

    • Виктор Рог

      В плеере видео урока поставьте более высокое качество. Справа вверху.

    • Андрей Кудлай

      Не знаю почему на Yandex video такое качество. На самом деле качество видео вполне приемлемое — разрешение 800*600. Можно скачать исходники и посмотреть видео там в нормальном качестве.

  2. Любовь Островская

    Информация доступная мне нравится, правда ещё многое не смогла сделать, но постепенно получается.

  3. Богма

    спасибо, код хороший

  4. Отец Виктор

    Спасибо… внес в свою копилку знаний. Пригодится!!!

  5. Эдуард

    Здорово разжевали!!!
    Трудно не понять!
    Обязательно применю!
    Спасибо!

  6. lekanin

    А как-же событие вставки в текст без нажатия Ctrl+V, например мышкой? И было бы неплохо посмотреть, как отключать дальнейший ввод при достижения максимального количества символов (тоесть не просто отключить, а какие клавиши можно оставить активными и по каким соображениям). Было бы замечательно увидеть урок про кроссбраузерный подсчет введенных строк в textarea

    • Андрей Кудлай

      Возникает вопрос о целесообразности всего этого… т.е. в данном случае цель просто не оправдает средства. На мой взгляд, весь представленный код существует не для проверки, а только лишь для удобства пользователя… а проверять нужно обязательно на стороне сервера. А так, обойти все проверки на JavaScript очень и очень просто… например:
      1) использовать мышь в данном случае, а не клавиатуру;
      2) отключить JavaScript;
      3) подделать форму.
      Это первое, что пришло на ум. Так что полагаться в этом случае на клиентскую часть просто бессмысленно — она нужна лишь для удобства пользователя.
      В комментарии ниже выложен чуть доработанный код функции, которым ограничивается ввод символов в текстовую область.

  7. Иван

    Да, все это хорошо, но вот если скопировать и вспавить, то этот код не сработает!

    • Андрей Кудлай

      В текстовых полях такое не пройдет, поскольку там установлен атрибут maxlength, который не даст вставить в это поле больше того, что можно. Как уже говорилось, для текстовой области такого атрибута нет. Можно немного доработать функцию (ниже код) и сделать так, чтобы в текстовой области при введении большего, чем максимум количества символов, обрезалось значение текстовой области. Алгоритм здесь несложен:
      1) в блоке иначе (если достигнут лимит символов) можно поместить в переменную значение текстовой области на данный момент;
      2) далее мы устанавливаем значением области полученное на первом шаге значение, только применим при этом метод substr(), которым обрежем строку до нужного нам максимума;
      3) при выводе подсчета кол-ва символов в блоке кода иначе, чтобы не было глюков, необходимо заменить вывод переменной count на переменную max.
      Обещанный код… В блоке иначе заменить этот код:
      // если достигнут лимит символов
      $(typeChars).text(‘Введено символов: ‘ + count);
      $(leftChars).text(‘Достигнут лимит символов’);
      $(this).addClass(‘type’);
      на этот:
      // если достигнут лимит символов
      var content = $(this).val(); // получаем значение поля
      $(this).val(content.substr(0,max)); // обрезаем его до максимальной длины
      $(typeChars).text(‘Введено символов: ‘ + max);
      $(leftChars).text(‘Достигнут лимит символов’);
      $(this).addClass(‘type’);
      Все остальное без изменений. Скачать функцию можно по ссылке http://narod.ru/disk/13726687001/func_limit.zip.html

  8. Сергей

    А я ещё баран во всем этом .Кто-бы показал все наглядно -тогда бы наверное понял!

  9. Васильков

    Было бы неплохо если бы текст-бокс розширялся еще по мере написания текста.

  10. Фарух

    Не работает функция length(), вообще код не работает, даже alert()! Вот как только убираю функцию length(), alert() срабатывает, вот собственно сам код:

    $(document).ready(function() {
    var max = 5;
    $(«.limitInput»).keyup(function() {
    var count = $(this).val().length();
    alert(count);
    var num = max — count;

    if(num > 0) {
    $(«#typeChars»).text(«Введено символов: » + count);
    $(«#leftChars»).text(«Можно ввести символов: » + num);
    $(this).removeClass(«type»);
    }
    else {
    $(«#typeChars»).text(«Введено символов: » + count);
    $(«#leftChars»).text(«Достигнут лимит символов!»);
    $(this).addClass(«type»);
    }
    });
    });

    Я новичек в jQuery. Но вроде бы все также как у вас…..не пойму в чем дело!

  11. Фарух

    Извините сам разобрался, length() без скобок должна быть, это походу не функция а свойство!

  12. Den

    АпУпенный сайт!
    Ребят, спасибо громадное… И видео-пояснения фри… Здорово..!

  13. Ильдарик

    Спасибо огромное! Очень полезно!

    Я скачал текущую библиотеку JQuery, зтем подключил на страницу. Сделал первый шаг как на видео, где через функцию alert должно высветиться количество введённых символов. Не сработало почему-то, хотя всё верно было. Через Ваши исходники всё нормально было :) Надо по-дольше разбираться с JQuery, мне нравится

  14. Joseph

    Буду краток: Андрей Кудлай, у Вас талант объяснять доступно! Спасибо!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree