Как получить значение input в JavaScript

Чтобы получить текст, который пользователь ввёл в input, сначала нужно найти поле на странице, а затем обратиться к его свойству value. Это свойство содержит текущее значение поля.

const input = document.querySelector('input');
const value = input.value;

Когда именно читать value, зависит от задачи. Значение можно получить после клика по кнопке, при отправке формы или сразу во время ввода.

• Получение значения input
• Получение значения по клику
• Получение значения во время ввода
• Получение значения внутри формы
• Как получить число из input
• Пустое значение и пробелы
• Свойство value и HTML-атрибут
• Checkbox, radio и input type=“file”
• Итого

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

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

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

Найдём input по его идентификатору и прочитаем свойство value:

const nameInput = document.querySelector('#user-name');
const username = nameInput.value;

console.log(username); // Анна

Если пользователь заменит имя на «Мария», следующий вызов nameInput.value вернёт строку ‘Мария’. Свойство хранит именно текущее состояние поля, а не только значение, указанное при загрузке страницы.

Для получения введённого текста не подходят textContent и innerHTML. Текст внутри input не является дочерним содержимым элемента - он хранится в value.

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

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

<label for="city">Город</label>
<input id="city" class="city-input" type="text">

<button class="show-city" type="button">Показать город</button>
<p class="city-result" aria-live="polite"></p>

const cityInput = document.querySelector('.city-input');
const showCityButton = document.querySelector('.show-city');
const cityResult = document.querySelector('.city-result');

showCityButton.addEventListener('click', function () {
  cityResult.textContent = cityInput.value;
});

JavaScript читает cityInput.value внутри обработчика. Поэтому результат содержит значение, которое находится в поле в момент клика, а не при первом выполнении скрипта.

Если записать значение во внешнюю переменную заранее, оно не будет автоматически обновляться:

const firstCityValue = cityInput.value;

showCityButton.addEventListener('click', function () {
  console.log(firstCityValue);
});

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

Получение значения во время ввода

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

<label for="message">Сообщение</label>
<input id="message" class="message-input" type="text" maxlength="50">

<p>Символов: <span class="message-length">0</span></p>

const messageInput = document.querySelector('.message-input');
const messageLength = document.querySelector('.message-length');

messageInput.addEventListener('input', function (event) {
  const currentValue = event.currentTarget.value;

  messageLength.textContent = currentValue.length;
});

После каждого изменения event.currentTarget указывает на поле с обработчиком, а его value содержит актуальный текст. В примере длина строки сразу выводится на страницу.

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

messageInput.addEventListener('input', function () {
  messageLength.textContent = messageInput.value.length;
});

Получение значения внутри формы

Поле внутри формы удобно получать по атрибуту name через form.elements.

<form class="login-form">
  <label>
    Логин
    <input name="login" type="text" required>
  </label>

  <button type="submit">Войти</button>
</form>

const loginForm = document.querySelector('.login-form');

loginForm.addEventListener('submit', function (event) {
  event.preventDefault();

  const login = loginForm.elements.login.value;

  console.log(login);
});

Значение читается при отправке формы, поэтому переменная login получает текст, который пользователь успел ввести. Атрибут name=“login” позволяет обратиться к полю как к loginForm.elements.login.

Как получить число из input

Свойство value возвращает строку даже у поля type=“number”.

<label for="age">Возраст</label>
<input id="age" type="number" value="25">

const ageInput = document.querySelector('#age');

console.log(ageInput.value); // '25'
console.log(typeof ageInput.value); // string

Если значение нужно использовать в вычислениях, его можно преобразовать через Number():

const ageFromString = Number(ageInput.value);

console.log(ageFromString); // 25
console.log(typeof ageFromString); // number

У числовых полей также есть свойство valueAsNumber, которое сразу возвращает число:

const ageAsNumber = ageInput.valueAsNumber;

console.log(ageAsNumber); // 25

Если числовое поле пустое или его значение нельзя представить числом, valueAsNumber вернёт NaN. Это удобнее, чем Number(”), потому что преобразование пустой строки через Number() вернёт 0.

if (Number.isNaN(ageInput.valueAsNumber)) {
  console.log('Возраст не указан');
}

Пустое значение и пробелы

Рассмотрим отдельное поле для имени:

<label for="required-name">Имя</label>
<input id="required-name" type="text">

Пустой input возвращает пустую строку ”. Сначала получим сам элемент, а затем проверим его значение:

const requiredNameInput = document.querySelector('#required-name');

if (requiredNameInput.value === '') {
  console.log('Введите имя');
}

Однако строка из нескольких пробелов не равна пустой строке. Для текстовых данных обычно сначала удаляют пробелы по краям методом trim():

const cleanName = requiredNameInput.value.trim();

if (cleanName === '') {
  console.log('Введите имя');
}

trim() возвращает новую строку и не меняет значение самого поля. Если очищенный текст нужно показать в input, его необходимо присвоить обратно:

requiredNameInput.value = cleanName;

Свойство value и HTML-атрибут

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

<input class="language-input" type="text" value="JavaScript">

const languageInput = document.querySelector('.language-input');

languageInput.value = 'TypeScript';

console.log(languageInput.value); // TypeScript
console.log(languageInput.getAttribute('value')); // JavaScript

После изменения поля свойство содержит новое значение, а атрибут остаётся таким, каким был в разметке. Поэтому для получения пользовательского ввода используйте input.value, а не getAttribute(‘value’).

Checkbox, radio и input type=“file”

Свойство value есть у разных типов input, но оно не всегда отвечает на главный вопрос о состоянии поля.

Например, у checkbox свойство value содержит значение, которое связано с флажком, но не сообщает, выбран ли он. Состояние хранится в checked:

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

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

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

Для получения выбранной radio-кнопки можно использовать псевдокласс :checked:

<label>
  <input name="delivery" type="radio" value="Курьер">
  Курьер
</label>

<label>
  <input name="delivery" type="radio" value="Самовывоз">
  Самовывоз
</label>

const selectedDelivery = document.querySelector(
  'input[name="delivery"]:checked',
);

const delivery = selectedDelivery?.value ?? '';

Оператор ?. защищает код на случай, если ни один вариант не выбран. Тогда переменная delivery получит пустую строку.

Итого

Текущее значение обычного input находится в свойстве value. Читать его нужно в момент, когда значение требуется: внутри обработчика клика, события input или отправки формы.

value возвращает строку. Для числового поля можно использовать valueAsNumber, состояние checkbox находится в checked, а выбранные файлы - в files. Чтобы получить именно пользовательский ввод, обращайтесь к DOM-свойству, а не к начальному HTML-атрибуту value.