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

Posted 2023-03-05

【中文标题】使用 CSS 在显示普通文本字段和输入之间进行切换

【英文标题】：Use CSS to change between displaying normal text fields & inputs

【发布时间】：2021-08-19 05:50:30

【问题描述】：

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

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

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

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

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

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

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

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

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

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

【问题讨论】：

在表单上使用"display: none" 或仅查看取决于您所处的模式怎么样？

【参考方案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>

【讨论】：

这是可能的。就是觉得很浪费。但是，话又说回来，它可能工作得很好，与网页可用的资源相比，“浪费”的资源可能很少。