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

Question

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

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

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

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

我怎样才能尽可能多地使用 CSS，而尽可能少地使用 JavaScript？

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

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

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

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

我知道 JavaScript 可以编辑 HTML DOM，但我更喜欢只使用 CSS 来执行此操作，以简化两种模式之间的切换。

标签： javascripthtmlcssdomhtml-input

Answer 1

一种选择是为视图和编辑模式使用完全独立的 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>