在 JavaScript 中更改輸入值

若要更改 HTML 文字輸入欄目前的內容，請選取目標元素，並將字串指定給它的 value 屬性。這會更新控制項目前顯示的值。這與更改 value 內容屬性不同；該內容屬性代表控制項的預設值。

使用 value 屬性更改目前的輸入值

例如，以下標記會為輸入欄指定 ID 和初始值：

本節中的程式碼以及顯示的標籤或輸出仍為英文。

<input type="text" id="user-name" value="Some Value">

在瀏覽器頁面中，使用 document.getElementById("user-name") 選取該元素，再以 input.value = "New value" 指定新文字。這項指定會更改目前的值，不會改寫原本的 HTML 屬性。使用者在輸入欄中打字時，也會使用同一個屬性。

以下是獨立的 JavaScript 指定範例。為了讓屬性操作能在瀏覽器以外執行，範例使用一個小型物件；在頁面程式碼中，input 則是選取到的輸入元素。

const input = { value: "Some Value" };
input.value = "New value";
console.log(input.value);

獨立的 JavaScript 範例會輸出：

New value

選取輸入元素

如果輸入欄有唯一的 ID，請使用 getElementById()。它會傳回具有該 ID 的元素；若找不到，則會傳回 null。如果元素可能不存在，請在指定值之前檢查查詢結果。例如，頁面程式碼可以先執行 const input = document.getElementById("user-name");，再執行 if (input) input.value = "New value";。

如果 CSS 選擇器能描述如何找到輸入欄，請使用 querySelector()，例如 document.querySelector('input[name="userName"]')。它會傳回第一個符合條件的元素；若沒有符合項目，則會傳回 null。請讓選擇器足夠明確，以找到目標控制項，尤其是頁面上有多個輸入欄時。這裡的選擇器範例適用於瀏覽器頁面，不是可獨立執行的程式。

也可以透過 document.forms 集合取得表單。假設表單名稱是 profile，控制項名稱是 userName，頁面程式碼可以使用 document.forms["profile"].elements["userName"] 存取該控制項。這種方式仰賴表單和控制項具有這些名稱，適合用於已知的表單；一般查找元素時，使用 ID 或 CSS 選擇器通常更清楚。document.forms 是集合，不是函式。

了解 setAttribute() 與預設值

輸入欄的 value 屬性代表目前的值。value 內容屬性提供預設值，可透過 defaultValue 屬性讀取。呼叫 setAttribute("value", "New default") 會更改該內容屬性和預設值。若目標是更改使用者目前看到的內容，這並不是指定 input.value 的通用替代方式。尤其是目前的值已透過屬性操作或使用者編輯而改變後，更改預設值並不代表目前的值也已更新。

若要立即更改目前的值，請使用 input.value = "New value"。若要更改標記中的預設值，請使用 input.setAttribute("value", "New default")。這兩種操作的名稱相近，但作用對象不同；請依照需求是更改控制項目前的狀態，還是更改其預設值來選擇。

驗證結果並選擇適當方法

選取輸入欄後，讀取 input.value 即可檢查目前的值。如果值沒有改變，請先確認選擇器找到的是目標元素，而且執行指定操作時，輸入欄已經出現在頁面中。getElementById() 或 querySelector() 查無結果時會傳回 null；若直接透過它指定值，操作會失敗，因此請先檢查查詢結果。也請確認程式是指定屬性，而不是只更改預設內容屬性。

若要直接更新值，請使用 getElementById() 依唯一 ID 選取元素，或使用合適的 CSS 選擇器搭配 querySelector()，再指定 value。已知表單和控制項名稱時，可以使用 document.forms。只有在目標是更改預設值或內容屬性時，才使用 setAttribute()。目前的值與預設值之間的差異，可以解釋為什麼更改內容屬性後，畫面上的文字可能沒有如預期更新。