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 上檢視此頁面 • 報告此內容的有問題之處