Динамічний рахунок символів у полях форми за допомогою jQuery

12

Від автора: напевно, кожен веб-розробник стикався з таким терміном, як юзабіліті. Якщо спробувати доступно пояснити значення цього терміна кількома словами, то можна сказати, що це зручність використання чогось користувачем. Стосовно до веб-додатків — це буде, відповідно, зручність використання користувальницьких інтерфейсів.

У цьому уроці ми навчимося робити таку річ, як підрахунок кількості символів, введених користувачем у те чи інше поле форми. Думаю, таку річ Вам вже доводилося бачити на різних сайтах. Часто ми обмежуємо (клієнтськими або серверними методами) кількість символів, введене, наприклад, в текстову область. І, як на мене, користувачеві буде набагато зручніше заповнювати це поле, якщо він буде знати, скільки ж саме символів він вже набрав і скільки ще зможе набрати.

До речі, ми реалізуємо обидва варіанти цієї корисності — ми не тільки будемо показувати скільки символів введено, але і скільки ще можна ввести… При цьому все буде відображатися динамічно та може бути застосоване до різних полів форми. Отже, приступимо.

Динамічний рахунок символів у полях форми за допомогою jQuery

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

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

Час ролика: 45:53

Посилання для скачування джерел: Завантажити вихідні коди

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

1. Трохи теорії

Загалом, весь урок присвячений роботі з jQuery, оскільки HTML і CSS, я думаю, у Вас не повинен викликати особливих питань. Але, все ж, давайте трохи пройдемося по структурі коду HTML і CSS стилів.

Ім’я:
e-mail:
Текст:

Тут ми бачимо звичайну форму з двома текстовими полями і текстову область.

Варто звернути увагу на атрибути maxlength у текстових полів. Ці атрибути покликані обмежувати кількість символів в полі. Я встановив значенням цих полів 5 — це, звичайно ж, мало, але для зручності тестування — в самий раз. Також текстових полів призначений клас limitInput, а текстової області присвоєний ідентифікатор limitInput — це зроблено для більш простого відбору даних елементів в набір jQuery (про це далі).

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

І трохи стилів — я їх не став виносити в окремий файл, оскільки їх дійсно небагато:

.type{
border: 1px solid red;
}
#typeChars, #leftChars{
border: 1px solid #ccc;
padding: 0 5px;
}

Клас 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:

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

А тепер усередині цієї конструкції ми пропишемо стандартну функцію jQuery, що визначає готовність документа:

$(document).ready(function(){
});

Тут ми прописали подія ready(), в який помістили весь інший код. Це зроблено для того, щоб цей код виконувався тільки після того, як буде повністю сформовано DOM-дерево або, кажучи простіше, — після того, як буде повністю завантажена сторінка. Для знайомих з англійським цей рядок коду інтуїтивно зрозуміла — після того, як буде готовий (ready — готово) документ — виконаємо все необхідне, тобто, той блок коду, який укладено в операторні дужки.

Далі ми пройдемося по сформульованим вище трьох етапів. Отже, для початку ми будемо працювати з текстовими полями, а тому відберемо їх у набір:

var max = 5; // максимум символів
$(document).ready(function(){
$(‘.limitInput’);
});

Також ми створили змінній max, якій присвоїли значення максимальної кількості символів.

Тепер ми повинні відслідковувати події пов’язані з набором jQuery. Для цього ми будемо використовувати подія keyup() — ця подія настає після того, як користувач відпускає клавішу клавіатури. В jQuery є ще декілька подій, пов’язаних з клавіатурою, наприклад, натискання(), keypress(). Вони, в принципі, також можуть бути використані при реалізації нашої задачі. Додамо подія keyup() до об’єкта jQuery:

$(document).ready(function(){
$(‘.limitInput’).keyup(function(){
});
});

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

Отримуємо перше значення:

$(document).ready(function(){
$(‘.limitInput’).keyup(function(){
var count = $(this).val().length(); // кількість вже введених символів
});
});

Тепер Давайте розберемо цю рядок коду:

$(this) — це вказівник на поточний елемент, тобто, той елемент, в якому відбулася подія;

val() — цей метод дозволяє отримати значення атрибута value у поточного елемента;

length() — ну а цим методом ми отримуємо вже довжину значення поточного елемента.

Для знайомих з англійською тут все інтуїтивно зрозуміло. Отримане значення ми позначили в змінну count. Друге значення, як вже зазначалося, отримати ще простіше:

$(document).ready(function(){
$(‘.limitInput’).keyup(function(){
var count = $(this).val().length(); // кількість вже введених символів
var num = max — count; // кількість символів, яку можна ввести
});
});

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

$(document).ready(function(){
$(‘.limitInput’).keyup(function(){
var count = $(this).val().length(); // кількість вже введених символів
var num = max — count; // кількість символів, яку можна ввести
if(num > 0){
// якщо не досягнуто ліміт символів
}else{
// якщо досягнуто ліміт символів
}
});
});

Чудово!

Залишилося взяти в набір блоки span і вивести в них значення змінних. Додавати текст в об’єкти jQuery можна за допомогою методу text(), а в якості параметрів ми як раз і вкажемо текст, який потрібно виводити.

$(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(‘Досягнуто ліміт символів’);
}
});
});

Якщо умова виконується: виводимо в перший блок текст і значення змінної count, а в другій — текст і значення змінної num. Якщо умова не виконується (в блок інакше): виводимо в перший блок текст і значення змінної count, а в другій — текст «Досягнуто ліміт символів».

Тепер до поточного елемента, якщо не виконується умова (тобто, якщо досягнуто ліміт символів), ми додамо клас type (подсветим поточне поле). Зробити це можна за допомогою методу addClass(). Також, щоб поле не подсвечивалось, якщо користувач видаляє символ в полі, в якому досягнуто вже був ліміт, ми повинні будемо видаляти клас type якщо умова виконується:

$(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’);
}
});
});

От і все.

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

3. Створюємо функцію

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

// Функція підрахунку кількості символів — START
function limitChars(){
$(‘.limitInput’).натискання(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(){
});

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

об’єкт, який відбирається на першому етапі, тобто, поля форми, в які вводяться символи;

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

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

блок, у який виводиться інформація про кількість символів, яку можна ввести.

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

// Функція підрахунку кількості символів — START
function limitChars(myObject, max, typeChars, leftChars){
$(myObject).натискання(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(){
});

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

$(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 символів (це мало для текстової області, але для зручності тестування коду — достатньо). Як бачимо, тепер нам не потрібно дублювати код — досить викликати функцію з потрібними параметрами.

Висновок

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

На цьому урок закінчений. Якщо якісь моменти були недостатньо висвітлені, то я з задоволенням спробую відповісти на Ваші питання в коментарях до даного уроку.

Приємного Вам сайтобудування!

Динамічний рахунок символів у полях форми за допомогою jQuery

E-mail: [email protected]