jquery - 在表单中实现查看/编辑模式

Question

我们的表单需要支持查看/编辑模式。在编辑模式下，所有字段都是可编辑的。在查看模式下，它们是只读的。也许有一种 CSS 样式可以应用，或者 Input Boxes 可以转换为 Labels。

仅供引用，我们的应用程序是在 Spring MVC 中，我们已经研究了一些想法:

1. 扩展 Spring MVC 的 Form 标签以支持从服务器端查看/编辑
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>');
  });
 }

建议使用 Form 标签属性，例如“数据模式”，但这是自定义属性吗？

这个问题有哪些标准的、好的解决方案，无论是从 JS、CSS 还是 SpringMVC(服务器端)的 Angular 来看？

Answer 1

您可以同时拥有两者的表格。输入和标签并根据表单模式显示/隐藏它们。

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