Свойство value в JavaScript

Свойство value содержит текущее значение элемента формы. Через него можно прочитать данные, которые ввёл или выбрал пользователь, а также изменить значение из JavaScript.

const currentValue = element.value;
element.value = 'Новое значение';

value является свойством, а не методом, поэтому круглые скобки после него не ставятся. Конкретный результат зависит от элемента и его типа.

Получение значения
Изменение значения
value возвращает строку
value у textarea
value у select и option
value у checkbox и radio
value у input type=“file”
Атрибут value и свойство defaultValue
Изменение value и события
Итого

Получение значения

Создадим поле с начальным текстом:

<label for="username">Имя</label>
<input id="username" type="text" value="Анна">

Найдём элемент и прочитаем его value:

const usernameInput = document.querySelector('#username');

console.log(usernameInput.value); // Анна

Если пользователь изменит текст, свойство сразу будет содержать новое значение. Оно отражает текущее состояние поля, а не только исходную HTML-разметку.

У пустого текстового поля value содержит пустую строку:

<input class="search-input" type="search">

const searchInput = document.querySelector('.search-input');

console.log(searchInput.value); // ''

Для проверки на пустое значение можно использовать строгое сравнение:

if (searchInput.value === '') {
  console.log('Строка поиска не указана');
}

Изменение значения

Присваивание нового значения сразу изменяет содержимое поля на странице:

usernameInput.value = 'Мария';

console.log(usernameInput.value); // Мария

Чтобы очистить поле, присвойте пустую строку:

usernameInput.value = '';

Можно использовать и вычисленное значение. Например, удалим пробелы по краям введённой строки:

usernameInput.value = usernameInput.value.trim();

Метод trim() возвращает новую строку, после чего она записывается обратно в поле. Само свойство value при чтении не изменяет данные.

value возвращает строку

У элементов формы value обычно возвращает строку. Это относится и к полю type=“number”:

<input class="quantity-input" type="number" value="5">

const quantityInput = document.querySelector('.quantity-input');

console.log(quantityInput.value); // '5'
console.log(typeof quantityInput.value); // string

Если число требуется для вычислений, можно использовать valueAsNumber:

const quantity = quantityInput.valueAsNumber;

console.log(quantity); // 5

Пустое или некорректное числовое поле вернёт через valueAsNumber значение NaN. Обычное value при этом останется строкой.

Формат значения зависит от типа поля. Например, input type=“date” возвращает строку вида YYYY-MM-DD, а input type=“color” - строку с цветом вида #336699.

value у textarea

Текущий текст внутри textarea также находится в свойстве value:

<textarea class="comment-field">Исходный комментарий</textarea>

const commentField = document.querySelector('.comment-field');

console.log(commentField.value); // Исходный комментарий

commentField.value = 'Новый комментарий';

Для работы с текстом, который пользователь вводит в textarea, не используйте textContent или innerHTML. Эти свойства относятся к содержимому разметки, а текущее состояние поля доступно через value.

value у select и option

У элемента select свойство value содержит значение первого выбранного пункта:

<select class="language-select">
  <option value="js">JavaScript</option>
  <option value="python">Python</option>
  <option value="go">Go</option>
</select>

const languageSelect = document.querySelector('.language-select');

console.log(languageSelect.value); // js

languageSelect.value = 'python';
console.log(languageSelect.value); // python

При присваивании браузер выбирает option с таким значением. Если совпадения нет, выбор снимается, selectedIndex становится равным -1, а select.value возвращает пустую строку.

languageSelect.value = 'rust';

console.log(languageSelect.value); // ''
console.log(languageSelect.selectedIndex); // -1

У самого option свойство value берётся из одноимённого атрибута:

const firstOption = languageSelect.options[0];

console.log(firstOption.value); // js
console.log(firstOption.textContent); // JavaScript

Если у option нет атрибута value, значением становится его текст.

<option>JavaScript</option>

У списка с атрибутом multiple свойство value возвращает только значение первого выбранного пункта. Для получения всех вариантов нужно перебрать коллекцию selectedOptions.

value у checkbox и radio

У checkbox и radio свойство value не показывает, выбран ли элемент. Оно содержит данные, которые связаны с этим вариантом:

<label>
  <input class="agreement" type="checkbox" value="accepted">
  Я принимаю условия
</label>

const agreementCheckbox = document.querySelector('.agreement');

console.log(agreementCheckbox.value); // accepted
console.log(agreementCheckbox.checked); // true или false

value останется строкой ‘accepted’ и у отмеченного, и у неотмеченного checkbox. Его состояние хранится отдельно в свойстве checked.

Если атрибут value не указан, стандартным значением checkbox или radio будет строка ‘on’:

<input class="option-checkbox" type="checkbox">

const optionCheckbox = document.querySelector('.option-checkbox');

console.log(optionCheckbox.value); // on

Поэтому вариантам checkbox и radio, данные которых отправляются с формой, обычно задают понятные значения явно.

value у input type=“file”

У файлового поля value не предоставляет доступ к выбранному файлу. Браузер может вернуть служебную строку наподобие C:\fakepath\photo.jpg, но настоящий путь к файлу скрыт.

Для работы с выбранными файлами используют свойство files:

<input class="document-input" type="file">

const fileInput = document.querySelector('.document-input');
const file = fileInput.files[0];

if (file) {
  console.log(file.name);
  console.log(file.size);
}

Записать произвольный путь в fileInput.value нельзя. Разрешена пустая строка, которая очищает поле:

fileInput.value = '';

Атрибут value и свойство defaultValue

HTML-атрибут value задаёт начальное значение обычного input. DOM-свойство value содержит текущее значение, а defaultValue - значение, к которому поле вернётся после сброса формы.

<form class="city-form">
  <input class="city-input" type="text" value="Москва">
</form>

const cityForm = document.querySelector('.city-form');
const cityInput = document.querySelector('.city-input');

cityInput.value = 'Казань';

console.log(cityInput.value); // Казань
console.log(cityInput.defaultValue); // Москва
console.log(cityInput.getAttribute('value')); // Москва

Присваивание свойству value не меняет HTML-атрибут. Если поле находится в форме и вызвать reset(), текущее значение снова станет равным defaultValue.

cityForm.reset();
console.log(cityInput.value); // Москва

Новую точку сброса можно задать через defaultValue:

cityInput.defaultValue = 'Самара';
cityForm.reset();

console.log(cityInput.value); // Самара

Для обычного изменения видимого значения используйте value. Обращаться к defaultValue нужно только тогда, когда требуется изменить именно исходное состояние поля.

Изменение value и события

При вводе пользователя браузер создаёт событие input. В обработчике value уже содержит обновлённое значение:

usernameInput.addEventListener('input', function (event) {
  console.log(event.currentTarget.value);
});

Присваивание через JavaScript само по себе не вызывает события input или change:

usernameInput.value = 'Ольга';

Если от значения зависит другая часть интерфейса, удобно вынести её обновление в функцию и вызывать эту функцию как из обработчика, так и после программного изменения:

<p>Имя: <span class="name-preview"></span></p>

const namePreview = document.querySelector('.name-preview');

function updateNamePreview() {
  namePreview.textContent = usernameInput.value;
}

usernameInput.addEventListener('input', updateNamePreview);

usernameInput.value = 'Ольга';
updateNamePreview();

Так поведение кода не зависит от искусственного создания событий, а обновление интерфейса остаётся в одном месте.

Итого

Свойство value используют для чтения и изменения текущего значения элементов формы. У input и textarea оно содержит введённую строку, у select - значение первого выбранного пункта, а у option - значение варианта.

У checkbox и radio выбор проверяют через checked, а у файлового поля сами файлы получают через files. Начальное значение обычного input хранится в defaultValue. Программное присваивание value изменяет поле, но не запускает события input и change.