Специфика работы с textarea и input

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

В Dom7 выбор элементов осуществляется с помощью функции $(). Для работы с input и textarea это может выглядеть следующим образом:

const inputField = $('input[name="username"]');
const textAreaField = $('textarea#message');

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

  • Можно использовать любые CSS-селекторы: по тегу, классу, идентификатору, атрибуту.
  • Возвращается коллекция Dom7, даже если элемент один, что позволяет применять методы коллекции к каждому элементу сразу.

Чтение и установка значений

Для input и textarea значение хранится в свойстве value. В Dom7 используются методы .val():

// Чтение значения
const inputValue = inputField.val();
const textAreaValue = textAreaField.val();

// Установка значения
inputField.val('Новый текст');
textAreaField.val('Сообщение для textarea');

Примечания:

  • .val() без аргументов возвращает значение первого элемента коллекции.
  • .val(value) устанавливает значение для всех элементов в коллекции.

Обработка событий ввода

Dom7 обеспечивает удобную работу с событиями через .on() и .off(). Для input и textarea наиболее важны события:

  • input — срабатывает при каждом изменении текста.
  • change — срабатывает при потере фокуса после изменения.
  • focus и blur — при входе и выходе из поля.

Пример:

inputField.on('input', function() {
  console.log('Текущая длина текста:', $(this).val().length);
});

textAreaField.on('focus', function() {
  $(this).addClass('active');
});

textAreaField.on('blur', function() {
  $(this).removeClass('active');
});

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

  • Событие input более динамично, чем change.
  • Можно привязать несколько обработчиков к одному элементу без конфликтов.
  • this внутри обработчика всегда указывает на текущий DOM-элемент, а не на коллекцию Dom7.

Модификация атрибутов и свойств

С помощью .attr() и .prop() можно управлять атрибутами и свойствами полей ввода:

// Установка и чтение атрибутов
inputField.attr('placeholder', 'Введите имя');
const placeholder = inputField.attr('placeholder');

// Управление свойствами
textAreaField.prop('disabled', true);
const isDisabled = textAreaField.prop('disabled');

Различие между attr и prop:

  • .attr() изменяет HTML-атрибут, что влияет на исходный код страницы.
  • .prop() изменяет текущее свойство объекта DOM, что сразу отражается в поведении поля.

Очистка и сброс значений

Dom7 упрощает сброс данных полей:

inputField.val('');
textAreaField.val('');

Для комплексного сброса формы:

$('form#contactForm')[0].reset();

Важно: .reset() используется на нативном DOM-элементе, поэтому берется первый элемент коллекции [0].

Работа с классами и стилями

Для визуальной индикации состояния полей используют методы .addClass(), .removeClass(), .toggleClass():

inputField.on('focus', function() {
  $(this).addClass('focused');
});

inputField.on('blur', function() {
  $(this).removeClass('focused');
});

Можно динамически менять CSS-свойства через .css():

textAreaField.css('borderColor', 'red');

Динамическое создание и вставка input и textarea

Dom7 позволяет создавать элементы через шаблон HTML и вставлять их в DOM:

const newInput = $('');
$('form#contactForm').append(newInput);

const newTextArea = $('');
$('form#contactForm').prepend(newTextArea);

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

  • Вставленные элементы сразу становятся частью коллекции Dom7, можно сразу привязать события.
  • Можно комбинировать методы .append(), .prepend(), .after(), .before() для точного позиционирования.

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

Управление фокусом на input и textarea осуществляется методами .focus() и .blur():

inputField.focus(); // перевод курсора в поле
textAreaField.blur(); // убирает фокус

Эти методы полезны для реализации автопереключения между полями или подсветки активного элемента формы.

Валидация и проверка значений

Dom7 не предоставляет встроенной валидации, но можно легко реализовать проверку с помощью .val():

inputField.on('blur', function() {
  const value = $(this).val();
  if (!value.match(/^[a-zA-Z0-9]{3,}$/)) {
    $(this).addClass('invalid');
  } else {
    $(this).removeClass('invalid');
  }
});

Примечание:

  • Легко комбинировать с CSS для визуальной обратной связи.
  • Можно создавать динамические подсказки и предупреждения при вводе.

Особенности работы с коллекциями

Даже если выбран один элемент, методы Dom7 применяются как к коллекции. Это позволяет использовать .each():

$('input, textarea').each(function(index, el) {
  $(el).on('input', function() {
    console.log(index, $(this).val());
  });
});

Преимущества:

  • Универсальный подход для массовой обработки форм.
  • Избегается дублирование кода при множественных полях.
Оглавление