使用 CSS 在显示普通文本字段和输入之间切换

问题描述

假设我有一个显示用户帐户信息的网页，其中包含用户名、名字、姓氏、出生日期、电子邮件地址等字段。

我想为此信息提供 2 种模式：

1. 显示模式：字段仅显示为看起来像普通文本的字段名称和值对（我不希望这些值看起来像是在禁用输入中显示）
2. 编辑模式：字段名称显示为字段值的标签，显示为字段值的适当可编辑输入

我想通过将 CSS 类（例如 edit）应用于显示字段的 <div> 来在这些模式之间切换。然后，这应该从将数据显示为普通文本更改为以每个字段具有适当 input 或其他元素的形式显示数据。

如何尽可能多地使用 CSS，尽可能少地使用 JavaScript？

我可以看到两种主要方法：

1. 始终使用 HTML 中的输入和表单元素，即使不在编辑模式下，但隐藏按钮（如提交）和禁用修改值，除非在 <div class=“edit”> 下，同时将输入元素的外观更改为使它们（未处于编辑模式时）看起来像正常的显示文本，而不是禁用的输入。
2. 仅在显示数据时使用非输入元素，然后在进入编辑模式时使用 CSS 将它们切换为输入元素，反之亦然

我不知道前者会对 SEO 或网页的其他方面产生什么影响。

我也不知道其中哪一个更容易实现，或者即使它们可以在不引起重大问题的情况下实现（对于 SEO、UI 等）。

我知道 JavaScript 可以编辑 HTML DOM，但我更愿意只使用 CSS 来做到这一点，以简化两种模式之间的切换。

解决方法

一种选择是为视图和编辑模式使用完全独立的 DOM 树，并使用 display 简单地切换这些独立树的显示。如此多的重复是否合理在很大程度上取决于您的用例。

const container = document.querySelector("#container");

function toggle() {
  container.classList.toggle("view");
  container.classList.toggle("edit");
};

.view div {
  display: block;
}

.view form {
  display: none;
}

.edit div {
  display: none;
}

.edit form {
  display: block;
}

<div id="container" class="view">
  <div>
    Name: Steve
  </div>
  <form>
    <label>Name: </label>
    <input value="Steve" />
  </form>
  <button onclick="toggle()">Toggle view</button>
</div>