HTML/JS中其他输入的只读等效项

3

背景

  • 我有一个基本的CRUD表单/网站应用程序。它恰好是React/Redux,但对于我们的目的来说并不重要。我相信这是一个HTML问题。
  • 表单本身有点像“法律文件”,多个用户同时登录查看/编辑它。(有点类似Google文档)
  • 一些用户只能查看,一些用户可以编辑。

问题

  • 我希望我的编辑用户能够使用表单元素(输入/选择等)来修改数据,并且我的查看用户能够尽可能地看到相同的数据。
  • 我希望我的查看用户能够从屏幕上复制和粘贴。
  • 禁用和readOnly标志不太适用。

失败的解决方案

  • 禁用:通过一些CSS魔法,它看起来完美,查看用户不会得到他们不应得到的点击反应。但是您无法复制和粘贴文本。这是应用程序的当前状态。
  • 只读:不受我拥有的许多输入(选择、单选按钮等)的支持,尽管它对于文本和文本区域来说几乎是完美的。

问题

有没有一种合理或优雅的方法来实现类似于只读但适用于所有HTML元素的行为?

澄清

  • 由于当前页面的视图正是我希望我的查看用户看到的(它被制作成有点像纸质表单),如果我选择使用“查看模式”跨度来替换我的组件或“查看页面”模式,我最终将不得不尽可能地使它们看起来像我当前的输入。试图从跨度和div中精确重建我拥有的东西而不是使我拥有的东西正确运作感觉很奇怪/糟糕。尽管如此...这是备选方案。
  • 我们正在使用各种输入。选择、日期和复选框等。文本和文本区域表现良好,但其余的表现就不那么良好了。

一个想法是向观众展示一个页面,显示数值(即没有输入)。 - devlin carnate
我只会替换元素。它们也不必像输入框一样,因为它们只是用于查看。对于大多数情况,普通的span标签应该就可以了。 - H.B.
你在尝试复制/粘贴方面做了什么?我做了一个简单的输入,选择了文本,复制/粘贴没有问题。 - Jonathan Chaplin
@devlincarnate 我想要避免的问题是创建一个视图版本。这样做会让我感觉到有很多不必要的重复代码。此时,我将构建一个带有只读标志的 Select react 组件,通过 if 语句实现我想要的功能...但这种方式并不礼貌。 耸肩 不过这可能是唯一的选择? - Suni
this.Print()不是答案,但可以帮助你完成一半。 - Ali Humayun
1个回答

2

只有输入框和文本框支持只读属性,可以查看caniuse

正如评论中所述,如果您需要,将输入元素替换为其他不允许插入数据的元素,并重新设计元素以实现类似外观。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接