【发布时间】：2023-03-24 23:28:01
【问题描述】：
背景
- 我有一个基本的 CRUD 表单/webapp。它恰好是 react/redux，但对于我们的目的来说这并不重要。我很确定这是一个 HTML 问题。
- 表单本身有点代表“法律文件”，多个用户同时登录即可查看/编辑。 （想想有点谷歌文档）
- 有些用户只能查看，有些用户可以编辑。
问题
- 我希望我的编辑用户能够使用表单元素（输入/选择等）来修改数据，并且我的视图用户能够以尽可能相似的方式查看相同的数据。
- 我希望我的视图用户能够从屏幕复制和粘贴。
- disabled 和 readOnly 标志将无法正常工作。
失败的解决方案
- 禁用：使用一点 CSS 魔法看起来很完美，并且视图用户不会得到不应有的点击反应。但是您不能复制和粘贴文本。这是应用的当前状态。
- ReadOnly：我的许多输入（选择、单选等）都不支持，尽管它非常适合 text 和 texarea。
问题
是否有一种合理或优雅的方式来实现像 ReadOnly 这样的行为但跨所有 HTML 元素？
澄清
- 因为页面的当前视图正是我希望我的视图用户看到的（它看起来有点像纸质表格）如果我选择为我的组件使用“视图模式”跨度或“视图页面” ' 模式我最终会有一个让它们看起来尽可能像我当前的输入。尝试从 span 和 div 中精确再现我所拥有的东西，而不是让我的行为正确，这感觉很奇怪/不好。不过……这是备用计划。
- 我们正在使用各种输入。选择和日期和复选框哦，我的。 Text 和 Texarea 表现良好，但其余部分表现不佳。
【问题讨论】：
-
一个想法是向查看者展示一个显示值（即没有输入）的页面。
-
我只会替换元素。它们也不应该看起来像输入，因为无论如何它们都是仅供查看的。在大多数情况下，常规跨度应该没问题。
-
您在复制/粘贴方面有什么尝试？？我做了一个简单的输入和选定的文本，复制/粘贴没问题。
-
@devlincarnate 创建视图版本是我试图避免的问题。我最终会得到不需要的重复代码。那时，我将使用 readonly 标志构建一个 Select react comp，该标志实际上就像我通过 if 语句想要的那样......感觉不礼貌。 耸耸肩可能是唯一的选择吗？
-
this.Print() 不是答案，但可以帮助您完成一半
标签： javascript html css forms reactjs