背景
- 我有一个基本的CRUD表单/网站应用程序。它恰好是React/Redux,但对于我们的目的来说并不重要。我相信这是一个HTML问题。
- 表单本身有点像“法律文件”,多个用户同时登录查看/编辑它。(有点类似Google文档)
- 一些用户只能查看,一些用户可以编辑。
问题
- 我希望我的编辑用户能够使用表单元素(输入/选择等)来修改数据,并且我的查看用户能够尽可能地看到相同的数据。
- 我希望我的查看用户能够从屏幕上复制和粘贴。
- 禁用和readOnly标志不太适用。
失败的解决方案
- 禁用:通过一些CSS魔法,它看起来完美,查看用户不会得到他们不应得到的点击反应。但是您无法复制和粘贴文本。这是应用程序的当前状态。
- 只读:不受我拥有的许多输入(选择、单选按钮等)的支持,尽管它对于文本和文本区域来说几乎是完美的。
问题
有没有一种合理或优雅的方法来实现类似于只读但适用于所有HTML元素的行为?
澄清
- 由于当前页面的视图正是我希望我的查看用户看到的(它被制作成有点像纸质表单),如果我选择使用“查看模式”跨度来替换我的组件或“查看页面”模式,我最终将不得不尽可能地使它们看起来像我当前的输入。试图从跨度和div中精确重建我拥有的东西而不是使我拥有的东西正确运作感觉很奇怪/糟糕。尽管如此...这是备选方案。
- 我们正在使用各种输入。选择、日期和复选框等。文本和文本区域表现良好,但其余的表现就不那么良好了。