背景
- 我有一个基本的 CRUD 表单/网络应用程序。它恰好是 react/redux 但对于我们的目的来说它并不重要。我很确定这是一个 HTML 问题。
- 表单本身有点像“法律文件”，多个用户登录后可以同时查看/编辑它。 (想想有点像谷歌文档)
- 部分用户只能查看，部分用户可以编辑。
问题
- 我希望我的编辑用户能够使用表单元素(输入/选择等)来修改数据，并且我的查看用户能够尽可能类似地查看相同的数据。
- 我希望我的查看用户能够从屏幕上复制和粘贴。
- disabled 和 readOnly 标志不会完全起作用。
失败的解决方案
- 已禁用:使用一点 CSS 魔法看起来很完美，并且 View 用户不会得到他们不应该的点击 react 。但是您不能复制和粘贴文本。这是应用程序的当前状态。
- ReadOnly:虽然它非常适合文本和 texarea，但我的许多输入(选择、 radio 等)都不支持。
问题
是否有一种合理或优雅的方式来实现类似 ReadOnly 但跨所有 HTML 元素的行为？
说明
- 因为页面的当前 View 正是我希望我的 View 用户看到的(它看起来有点像纸质表格)如果我选择对我的组件或“ View 页面”使用“ View 模式”跨度' 模式我最终会使用 a 使它们看起来尽可能像我当前的输入。尝试从 span 和 div 中精确地再现我所拥有的，而不是使我的行为正确，这感觉很奇怪/不好。不过……这是备用计划。
- 我们正在使用各种输入。选择和日期和复选框哦，我的。 Text 和 Texarea 表现良好，但其余部分表现不佳。
最佳答案
Readonly property 只被 input 和 textarea 支持，检查 caniuse .
正如评论中所说，将输入元素替换为其他不允许插入数据的元素，并重新设置元素样式以使其看起来相似(如果您想要的话)。
关于javascript - html/JS 中其他输入的只读等价物，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49498774/