HTMLInputElement: свойство value

Свойство value интерфейса HTMLInputElement представляет собой текущее значение элемента <input> в виде строки.

Это свойство также можно задать напрямую, например, для установки значения по умолчанию на основе некоторого условия.

Строка, содержащая значение элемента <input>, или пустая строка, если у элемента ввода нет заданного значения.

В этом примере журнал отображает текущее значение по мере ввода данных в поле ввода.

HTML

Мы включаем <input> и связанный с ним <label>, а также контейнер <pre> для вывода.

<label for="given-name">Your name:</label>

<input name="given-name" id="given-name" />

<pre id="log"></pre>

JavaScript

Свойство innerText элемента <pre> обновляется до текущего значения <input> каждый раз при срабатывании события keyup.

const logElement = document.getElementById("log");
const inputElement = document.getElementById("given-name");

inputElement.addEventListener("keyup", () => {
  logElement.innerText = `Name: ${inputElement.value}`;
});

Результаты

Этот пример демонстрирует свойство value с типом <input> цвета.

HTML

Мы включаем <input> типа color.

<label for="color">Pick a color:</label>

<input name="color" id="color" type="color" />

<pre id="log"></pre>

JavaScript

Свойство innerText элемента <pre> обновляется значением цвета по умолчанию (#000000) и затем обновляется каждый раз при срабатывании события change.

const logElement = document.getElementById("log");
const inputElement = document.getElementById("color");

logElement.innerText = `Color: ${inputElement.value}`;

inputElement.addEventListener("change", () => {
  logElement.innerText = `Color: ${inputElement.value}`;
});

Результаты

• <input>
• HTMLInputElement.valueAsDate
• HTMLInputElement.valueAsNumber