javascript - 跨浏览器 : Different behaviors for disabled input fields (the text can/can't be copied)

Question

我有一个禁用的输入 html 字段。在某些浏览器(Chrome、Edge、Internet Explorer 和 Opera)中可以选择和复制文本，但至少在 Firefox 中这是不可能的。

您可以通过在不同的浏览器中执行以下代码来测试它:

<input type="text" disabled value="is disable">
<input type="text" readonly value="is readonly">

我读入了here 禁用的字段可以成为焦点，here 禁用的输入元素不可用且不可点击，并且在 here 中无法修改只读输入字段(但是，用户可以切换到它、突出显示它并从中复制文本)。

我没有发现任何关于禁用输入的文本无法复制的内容。

有标准行为，但一些浏览器不遵守它，或者浏览器可以选择是否可以复制来自禁用输入的文本？

是否有一种解决方案允许在所有浏览器中复制禁用的输入字段中的文本？

注意:我的应用程序是使用 Angular/TypeScript 语言实现的。

---

似乎唯一具有独特行为的浏览器是 firefox。我在 here 中开了一个问题试图了解是设计选项还是错误。我现在正在等待答案。

Answer 1

将您的字段从 disabled 更改为 readonly。这是您想要的行为的正确属性。

不要浪费时间一起破解 javascript 解决方案，因为它会比浏览器行为的微小差异更加不稳定。

如果问题是您希望只读字段看起来像禁用字段，那么使用 readonly 属性集设置输入样式是相当容易的。您不需要改变行为来改变外观。

input[readonly] {
  background: #EEE;
  color: #666;
  border: solid 1px #CCC;
}

<input readonly value="I am readonly">