JS 表單編輯狀態切換：readonly + CSS 控制輸入框邊框顯示/隱藏

交互邏輯

• 默認：輸入框無邊框、readonly、顯示純文本效果
• 點擊「編輯」：顯示邊框、移除 readonly、按鈕文字變「保存」
• 點擊「保存」：隱藏邊框、恢復 readonly、按鈕文字變「編輯」、AJAX 提交數據

完整實現

<style>
.readonly input { border: none; background: transparent; outline: none; }
.editing input { border: 1px solid #ccc; background: white; }
</style>

<div id="formArea" class="readonly">
  姓名：<input type="text" readonly value="張三" /><br/>
  郵箱：<input type="text" readonly value="zhang@example.com" />
</div>
<button id="btnEdit" onclick="toggleEdit(this)">編輯</button>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
function toggleEdit(btn) {
    var toEdit = btn.innerText === '編輯';
    $('#formArea').toggleClass('readonly editing', toEdit)
                 .find('input').prop('readonly', !toEdit);
    btn.innerText = toEdit ? '保存' : '編輯';
    
    if (!toEdit) {
        // 保存邏輯
        var data = {};
        $('#formArea input').each(function() {
            data[this.name || this.id] = this.value;
        });
        $.post('/api/update', data, function(res) {
            if (!res.success) alert('保存失敗');
        });
    }
}
</script>

關鍵技巧

• readonly vs disabled：readonly 仍隨表單提交，disabled 不提交且樣式灰化
• CSS 類切換控制視覺狀態，JS 僅管邏輯
• 輸入框需有 name 或 id 便於序列化

「偽文本編輯」體驗優於彈窗編輯：上下文不中斷、操作路徑極短。readonly + CSS 是零依賴實現標準方案。