Работа с полями ввода

Zepto.js предоставляет удобные методы для работы с элементами форм, особенно с полями ввода. Библиотека ориентирована на лёгкость и совместимость с современными браузерами, что делает её удобной для динамического управления формами и обработки пользовательского ввода.

Выбор элементов ввода

Для работы с полями ввода используется селектор $(), аналогичный jQuery. Можно выбирать элементы по тегу, классу или идентификатору:

var inputText = $('input[type="text"]'); // все текстовые поля
var passwordField = $('#password');      // поле с id="password"
var allInputs = $('input, textarea');    // все поля ввода и текстовые области

Особенности Zepto:

  • Поддерживаются CSS-селекторы, включая атрибутные [type="email"].
  • Методы фильтрации :first, :last, :eq(n) позволяют выбирать конкретные элементы из коллекции.

Чтение и запись значений

Метод .val() используется для получения и установки значений:

var username = $('#username').val();  // получить текущее значение
$('#username').val('Новый пользователь'); // установить значение

Ключевые моменты:

  • Для <input> и <textarea> .val() работает напрямую с атрибутом value.
  • Для <select> возвращается выбранный вариант. Если <select multiple>, метод возвращает массив выбранных значений.
var selectedOptions = $('#multiSelect').val(); // массив выбранных значений
$('#multiSelect').val(['option1', 'option3']); // выбрать несколько значений

Работа с атрибутами полей

Методы .attr() и .prop() позволяют управлять атрибутами и свойствами элементов формы:

$('#email').attr('placeholder', 'Введите email'); // установка атрибута
var isRequired = $('#email').prop('required');     // проверка свойства
$('#email').prop('disabled', true);               // отключение поля

Разница между .attr() и .prop():

  • .attr() управляет атрибутами в HTML-разметке.
  • .prop() управляет свойствами DOM-элемента, например checked, disabled.

Управление фокусом

Методы .focus() и .blur() управляют фокусом на элементах формы:

$('#username').focus(); // установка фокуса
$('#username').blur();  // снятие фокуса

Можно использовать события focus и blur для реагирования на действия пользователя:

$('#password').on('focus', function() {
    $(this).css('border-color', 'blue');
}).on('blur', function() {
    $(this).css('border-color', '');
});

События ввода

Zepto поддерживает ключевые события для полей ввода: input, change, keyup, keydown, keypress.

$('#username').on('input', function() {
    console.log('Текущее значение:', $(this).val());
});

$('#country').on('change', function() {
    console.log('Выбранная страна:', $(this).val());
});

Особенности событий:

  • input срабатывает при каждом изменении значения.
  • change срабатывает только при потере фокуса после изменения.
  • Для клавиатурных событий keyup, keydown, keypress можно отслеживать коды клавиш через event.keyCode.

Управление флажками и радиокнопками

Для работы с checkbox и radio применяется метод .prop('checked'):

// установка состояния
$('#agree').prop('checked', true);

// проверка состояния
if ($('#agree').prop('checked')) {
    console.log('Пользователь согласился');
}

// радиокнопки
var selectedGender = $('input[name="gender"]:checked').val();

Важно: использование .attr('checked') может не отражать текущее состояние после изменения пользователем.

Очистка и сброс полей

Для очистки полей ввода можно использовать .val(''):

$('input[type="text"], textarea').val(''); // очистка всех текстовых полей

Сброс формы к исходным значениям выполняется через метод reset DOM-формы:

$('#myForm')[0].reset();

Валидация значений

Zepto не содержит встроенных функций для валидации, но легко интегрируется с кастомной логикой:

$('#email').on('blur', function() {
    var value = $(this).val();
    var regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!regex.test(value)) {
        $(this).css('border-color', 'red');
    } else {
        $(this).css('border-color', '');
    }
});

Динамическое добавление и удаление полей

Можно добавлять новые элементы формы через метод .append() или .prepend():

$('#formContainer').append('<input type="text" name="newField" />');

Удаление полей осуществляется с помощью .remove():

$('input[name="oldField"]').remove();

Примеры комплексного использования

  1. Автоматическое обновление значения другого поля:
$('#firstName, #lastName').on('input', function() {
    var fullName = $('#firstName').val() + ' ' + $('#lastName').val();
    $('#fullName').val(fullName);
});
  1. Валидация и подсветка ошибок:
$('input[required]').on('blur', function() {
    if (!$(this).val()) {
        $(this).css('border-color', 'red');
    } else {
        $(this).css('border-color', '');
    }
});
  1. Сбор данных формы в объект:
var formData = {};
$('#myForm input, #myForm select, #myForm textarea').each(function() {
    var name = $(this).attr('name');
    formData[name] = $(this).val();
});
console.log(formData);

Zepto.js обеспечивает лёгкий и гибкий инструмент для работы с полями ввода, позволяя управлять значениями, свойствами и событиями без громоздкого кода, сохраняя при этом совместимость с современными веб-стандартами.

Оглавление