HTML 表單聯動：密碼輸入框內容實時同步到確認密碼隱藏框

需求

兩個 <input type="password">，第一個輸入密碼，第二個（隱藏）自動填入相同內容，提交時雙雙送後端驗證。

最簡實現（原生 JS）

<input type="password" id="pwd" placeholder="密碼" 
       oninput="document.getElementById('cpwd').value = this.value">
<br>
<input type="password" id="cpwd" placeholder="確認密碼" style="display:none">

oninput 事件在值改變時立即觸發（含粘貼、拖拽、輸入法組合），比 onkeyup/onchange 更可靠。

jQuery 版（兼容舊項目）

$('#pwd').on('input', function() {
    $('#cpwd').val(this.value);
});

安全性提醒

• 前端同步**不替代後端驗證**，後端必須再次比對兩字段是否一致。
• 隱藏框用 type="password" 而非 display:none，防止瀏覽器自動填充干擾；若必須隱藏，可 style="opacity:0;position:absolute;pointer-events:none" 保持可提交。
• 生產環境建議使用 autocomplete="new-password" 禁用瀏覽器記憶。

進階：Vue/React 受控組件

<!-- Vue 3 -->
<input type="password" v-model="form.pwd" @input="form.cpwd = form.pwd">
<input type="password" v-model="form.cpwd" style="display:none">