HTMLInputElement: value 属性

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

HTMLInputElement 接口的 value 属性表示 <input> 元素的当前值，类型为字符串。

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

值

一个字符串，指定 <input> 元素的默认值。

示例

获取文本输入的 value

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

HTML

我们包含了一个 <input> 元素和相关的 <label> 元素，以及一个 <pre> 容器来显示我们的输出。

html

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

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

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

JavaScript

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

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

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

#log {
  height: 20px;
  padding: 0.5rem;
  background-color: #ededed;
}

结果

获取颜色值

此示例演示了类型为 color 的 <input> 元素的 value 属性。

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 事件时进行更新。

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

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

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

#log {
  height: 20px;
  padding: 0.5rem;
  background-color: #ededed;
}

结果

规范

规范
HTML # dom-input-value

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 2025年4月22日 07:02:08 by MDN contributors。

在 GitHub 上查看此页面 • 报告此内容的有问题之处