設置html input默認值主要有以下方法：1. 對于text、number等類型，直接使用value屬性；2. 對于checkbox和radio，使用checked屬性控制默認選中狀態；3. 使用JavaScript動態設置默認值時，可通過dom操作賦值，并結合domcontentloaded事件確保執行時機；4. placeholder用于提示文本，value用于實際提交的默認值；5. 處理date類型瀏覽器差異時，可用javascript格式化日期為yyyy-mm-dd并賦值；6. 提供“恢復默認值”按鈕時，可先保存初始值并在點擊時重新賦值。以上方法能應對不同場景下的input默認值設置需求。
設置HTML input元素的默認值，主要通過value屬性實現。但這背后涉及到多種情況，比如不同類型的input元素、JavaScript動態設置、以及用戶體驗的考量。
解決方案：
對于大多數input類型，直接使用value屬性即可：
立即學習“前端免費學習筆記（深入）”；
<input type="text" id="name" name="name" value="默認姓名"> <input type="number" id="age" name="age" value="18">
對于checkbox和radio，需要結合checked屬性：
<input type="checkbox" id="agree" name="agree" value="yes" checked> 我同意 <input type="radio" id="male" name="gender" value="male" checked> 男 <input type="radio" id="female" name="gender" value="female"> 女
注意：checked屬性無需賦值，只需存在即可。
如何使用JavaScript動態設置input默認值？
有時候，默認值需要根據某些條件動態設置。 這時候，JavaScript就派上用場了。
<input type="text" id="city" name="city"> <script> document.addEventListener('DOMContentLoaded', function() { let userCity = localStorage.getItem('userCity'); // 假設從本地存儲獲取 if (userCity) { document.getElementById('city').value = userCity; } else { document.getElementById('city').value = '北京'; // 默認值 } }); </script>
這段代碼會在頁面加載完成后，先嘗試從localStorage獲取用戶城市信息，如果獲取不到，就設置為“北京”。 使用DOMContentLoaded事件確保在DOM加載完成后執行JavaScript代碼，避免找不到元素的問題。
placeholder和value有什么區別？什么時候使用哪個？
placeholder和value雖然都與input元素的顯示有關，但用途截然不同。value是input元素的實際值，提交表單時會包含在數據中。而placeholder只是一個提示文本，當input元素為空時顯示，用戶輸入內容后消失。
- 使用value的情況： 需要預先填充input元素的值，例如用戶上次輸入的信息、默認選項等。
- 使用placeholder的情況： 僅需要提示用戶應該輸入什么內容，不作為實際值提交。
例如：
<input type="text" id="email" name="email" placeholder="請輸入您的郵箱"> <input type="text" id="username" name="username" value="上次登錄用戶名">
郵箱使用placeholder提示用戶輸入格式，而用戶名使用value顯示上次登錄的用戶名。
如何處理不同瀏覽器對input type=”date”默認值顯示格式的差異？
input type=”date”在不同瀏覽器上的默認值顯示格式可能存在差異。 例如，chrome可能顯示YYYY-MM-DD，而firefox可能顯示MM/DD/YYYY。 為了保證一致性，可以使用JavaScript進行格式化。
<input type="date" id="birthday" name="birthday"> <script> document.addEventListener('DOMContentLoaded', function() { let today = new Date(); let year = today.getFullYear(); let month = String(today.getMonth() + 1).padStart(2, '0'); // 月份從0開始，需要+1 let day = String(today.getDate()).padStart(2, '0'); let formattedDate = `${year}-${month}-${day}`; document.getElementById('birthday').value = formattedDate; }); </script>
這段代碼獲取當前日期，并將其格式化為YYYY-MM-DD，然后設置為input type=”date”的默認值。 padStart(2, ‘0’)用于確保月份和日期始終是兩位數，不足兩位數時在前面補0。
如何避免用戶修改了默認值后，又想恢復到默認值的情況？
提供一個“恢復默認值”的按鈕，讓用戶可以方便地恢復到初始狀態。
<input type="text" id="address" name="address" value="北京市"> <button id="resetAddress">恢復默認地址</button> <script> document.addEventListener('DOMContentLoaded', function() { let defaultAddress = document.getElementById('address').value; // 保存默認值 document.getElementById('resetAddress').addEventListener('click', function() { document.getElementById('address').value = defaultAddress; // 恢復默認值 }); }); </script>
這段代碼首先保存address input元素的默認值，然后在用戶點擊“恢復默認地址”按鈕時，將input元素的值恢復為保存的默認值。
