对于html / JS中的其他输入，只读等效项

Question

背景

• 我有一个基本的CRUD表单/ webapp。碰巧是反应/减少，但就我们的目的来说，它并不重要。我很确定这是一个HTML问题。
• 表单本身代表一个“法律文档”，多个用户登录一次查看/编辑它。 （想想有点谷歌文档ish）
• 有些用户只能查看，有些用户可以编辑。

问题

• 我希望我的编辑用户能够使用表单元素（输入/选择等）来修改数据，并且我的视图用户可以看到尽可能相似的相同数据。
• 我希望我的观看用户能够从屏幕上复制和粘贴。
• 禁用和readOnly标志不起作用。

失败的解决方案

• 已禁用：使用一点点CSS魔术看起来很完美，并且视图用户不会得到他们不应该的onclick反应。但是你不能复制和粘贴文本。这是应用程序的当前状态。
• ReadOnly ：我的许多输入（选择，收音机等）都不支持它，尽管它对于文本和texarea来说非常完美。

问题

是否有合理或优雅的方式来实现ReadOnly之类的行为，但是跨所有HTML元素？

澄清

• 由于页面的当前视图正是我希望我的视图用户看到的（它看起来像纸张形式一点）如果我选择使用“查看模式”跨越我的组件或“查看页面'模式我最终会让他们看起来像我当前的输入尽可能多。尝试精确地重新创建我所拥有的跨度和div而不是制作我正确行为的东西，这感觉很奇怪/不好。仍然......这是备份计划。
• 我们正在使用各种输入。选择和日期和复选框哦我的。 Text和Texarea很乖，但其余的表现不太好。

Answer 1

只有input和textarea支持Readonly propperty，请检查caniuse。

正如在评论中所说的那样，替换不允许插入数据的其他人的输入元素，并重新设置元素的样式，如果这是你想要的那样。