在 jQuery 中設定輸入值

使用 jQuery 的 val() 方法，可以設定輸入欄位的值、讀取目前的值，或根據舊值產生新值。選取要操作的輸入欄位，再呼叫 .val("new value") 即可更新其值。以下範例會說明設定值、回呼函式、讀取值，以及避免常見錯誤的檢查方式。

使用 .val() 設定輸入欄位的值

對 jQuery 選取結果呼叫 .val(value)，即可為所有符合條件的元素設定值。例如，$("#email").val("reader@example.com") 會將 ID 為 email 的輸入欄位設為指定值。請將選擇器和字串換成頁面實際使用的內容。像 $(".email") 這類類別選擇器可能會選取多個輸入欄位，因此只有在你想更新每個符合條件的欄位時才使用它。

呼叫執行時，目標元素必須已存在。你可以將呼叫放在 ready 處理函式中，例如 $(function () { ... })，或在相關表單標記之後載入指令碼。如果選擇器沒有選取到任何元素，就不會有欄位被更新；值看起來沒有改變時，請檢查選擇器以及元素的 ID 或類別。

使用回呼函式更新輸入欄位的值

如果新值取決於各輸入欄位目前的值，請將函式傳給 .val()。jQuery 會對每個符合條件的元素呼叫該函式，並將從零開始的位置索引和目前的值作為引數傳入。請回傳要設定的值；這些引數是傳入回呼函式的資料，不會自動成為回傳值。這種方式適合轉換多個欄位，省去分開讀取和設定的步驟。

例如，以下回呼邏輯會根據目前的值回傳大寫文字。這是展示轉換方式的獨立 JavaScript 範例；在網頁中，請將回呼函式傳給所選輸入欄位的 .val()：

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

function uppercaseValue(index, currentValue) {
  return currentValue.toUpperCase();
}

const updatedValue = uppercaseValue(0, "delft");

若要保留常見的失焦時轉為大寫行為，請綁定 blur 處理函式，並在其中使用 $(this).val(function (index, currentValue) { return currentValue.toUpperCase(); })。使用者離開欄位時，回呼函式回傳的字串會取代該欄位的值。如果不需要索引，可以省略 index 參數。

使用 .val() 讀取輸入欄位的值

不帶引數呼叫 .val()，即可讀取選取結果中第一個元素的值。例如，const email = $("#email").val(); 會將目前的值存入變數，供程式檢查或在其他地方使用。如果選擇器符合多個元素，讀取方法仍只會取得第一個元素的值；若要取得每個元素的值，請逐一處理。

從輸入欄位讀取的值是字串。如果後續邏輯需要數字，請明確轉換，並考量使用者實際輸入的文字。讀取方法取得的是欄位目前的值，該值可能已在頁面載入後變更。

設定輸入欄位值時的常見檢查

• **確認選擇器：**確認 ID、類別或其他選擇器確實符合預期的輸入欄位。若選擇器符合多個欄位，所有欄位都會更新。
• **檢查執行時機：**等輸入欄位存在後再執行設定操作，例如放在 jQuery ready 處理函式中，或表單標記之後。
• **檢查值的來源：**使用回呼函式時，請回傳轉換後的字串。回呼函式依序接收元素索引和目前的值。
• **分開處理事件：**使用 .val() 設定值本身不會觸發 change 事件。如果其他程式碼需要回應這項程式化更新，請在設定值後明確觸發所需事件，例如呼叫 .trigger("change")。
• 區分畫面顯示與表單提交：.val() 會變更控制項目前的值，但不會更新頁面上無關的文字，也不保證該欄位會包含在表單提交資料中。若需確認提交行為，請檢查輸入欄位是否已啟用，以及是否屬於該表單。