Вебсправочник
Ваш первый сайт

Урок: текущее и исходное значение textarea

Textarea хранит текущее значение отдельно от значения по умолчанию. Это различие проявляется при вводе, программном изменении и сбросе формы.

Назначение

Textarea хранит текущее значение отдельно от значения по умолчанию. Это различие проявляется при вводе, программном изменении и сбросе формы.

Как это работает

Пример создаёт отдельную форму в памяти. DefaultValue задаёт исходный текст, value — текущий. Form.reset возвращает поле к значению по умолчанию, не отправляя никаких данных.

Пример

const form = document.createElement("form");
const field = document.createElement("textarea");
field.defaultValue = "Исходная заметка";
form.append(field);
field.value = "Изменённая заметка";
console.log(field.value, field.defaultValue);
form.reset();
console.log(field.value, field.defaultValue);

Что должно получиться

До reset текущий текст отличается от исходного, после — снова совпадает. Форма не добавляется на страницу и не меняет пользовательский ввод в других полях.

Граница применения и частая ошибка

Не храните несохранённый черновик только в ожидании стандартного reset: он предназначен для возврата исходного состояния. У textarea начальная разметка задаётся текстовым содержимым, а не HTML-атрибутом value. Проверяйте свои дополнительные счётчики и сообщения после сброса.

Самостоятельная проверка

Измените defaultValue после установки текущего value и изучите поведение. Повторите опыт в видимой форме с кнопкой reset. Убедитесь, что пользователь понимает потерю изменений до выполнения сброса.

Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.