以表格形式實現查看/編輯模式

Question

我們的表單需要支持查看/編輯模式。在編輯模式下，所有字段都是可編輯的。在查看模式下，它們是隻讀的。也許有可以應用的CSS樣式，或者輸入框可以轉換爲標籤。

僅供參考，我們的應用程序是在Spring MVC中，我們已經研究了一些想法：

1. 擴展Spring MVC的表單標籤從服務器端支持查看/編輯
2. 一些JS/jQuery的調整
3. 一些CSS調整

我發現了一個類似的主題在此： Implement read/edit mode in form

<form data-mode="read"> 
    <input value="Hello" /> 
</form> 

if($('form').data('mode') == 'read'){ //remove fields and add text 
    $('form').find(':input').each(function(){ 
    $(this).replaceWith($('<span>' + $(this).val() + '</span>'); 
    }); 
} 

的建議是，有一個表格標籤屬性，例如「數據模式」，但這是一個自定義屬性？

對於這個問題，無論是從JS，CSS還是SpringMVC（服務器端）的角度來看，什麼是標準的，很好的解決方案？謝謝

Answer 1

你可以有兩種形式。輸入和標籤並基於表單模式顯示/隱藏它們。

<div style"display:none"> 
Name: <input> 
<div> 
<div> 
    Name: My Name 
<div>