HTMLInputElement: value 属性

value 属性是 HTMLInputElement 接口的属性，它表示 <input> 元素的当前值，以字符串形式表示。

此属性也可以直接设置，例如，根据某些条件设置默认值。

值

包含 <input> 元素值的字符串，或者如果输入元素没有设置值，则为空字符串。

示例

检索文本输入的值

在此示例中，日志会随着用户在输入框中输入数据而显示当前值。

HTML

我们包含一个 <input> 和一个相关的 <label>，以及一个 <pre> 容器来存放我们的输出。

html
<label for="givenname">Your name:</label>

<input name="givenname" id="givenname" />

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

JavaScript

每次触发 keyup 事件时，<pre> 元素的 innerText 会更新为 <input> 的当前值。

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

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

结果

检索颜色值

此示例演示了 value 属性与类型为 color 的 <input> 结合使用的情况。

HTML

我们包含一个类型为 color 的 <input>。

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

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

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

JavaScript

<pre> 元素的 innerText 会使用默认颜色值 (#000000) 更新，然后在每次触发 change 事件时更新。

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

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

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

结果

规范

规范
HTML 标准
# dom-input-value

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅