单击元素并编辑内容（如文本区域）

Posted 2023-05-07

【中文标题】单击元素并编辑内容（如文本区域）

【英文标题】：Click on element and edit the content (like a textarea)

【发布时间】：2013-05-23 08:45:32

【问题描述】：

我想要一个包含一些文本的元素（从数据库调用），单击该元素并能够编辑文本，然后当我单击该元素时，将更新的文本保存在数据库中。

我主要想知道这样做的“最佳”方式。我考虑过的两件事是在您单击/关闭元素时交换元素和文本区域。

或

如果用户已登录，只需将所有可编辑元素加载为 ，其样式在单击之前不会看起来像文本区域。

一个页面上会有 5-100 个不同的可编辑元素，所以我真的只需要最好的性能解决方案来处理这样的事情。我可以想象用 js 交换元素会比只检查用户是否是管理员然后加载 100 个文本区域要慢。

哪个是最好的解决方案？ （也接受其他替代方案）

【问题讨论】：

用户必须执行一些操作（即单击 div）才能将其从 div 更改为 textarea，对吗？然后我会将它们全部显示为 div 元素，并仅在单击时交换它们。

@user1032531 确实如此。它将废除常规管理面板，而不是半所见即所得地编辑内容。管理员已登录，正常查看页面，单击他要更改的部分，更改为文本区域，单击关闭它会更改回并保存更改

【参考方案1】：

“最佳”在这里的问题中表现不佳，因为您应该有一个特定的问题，但我可以建议使用ContentEditable 区域吗？有了它，它可以兼作显示和输入元素。

然后使用事件捕获更改并提交。

【讨论】：

以为 ContentEditable 与旧浏览器不兼容，实际上是well supported（把这个给可能和我一样想的人）