跨浏览器:禁用输入字段的不同行为(可以/不能复制文本)

前端之家收集整理的这篇文章主要介绍了跨浏览器:禁用输入字段的不同行为(可以/不能复制文本) 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我有一个禁用的输入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中打开了一个问题,试图了解是设计选项还是bug.我正在等待答案.

最佳答案
将您的字段从禁用更改为只读.这是您想要的行为的正确属性.

不要浪费时间一起破解javascript解决方案,因为它比浏览器行为上的细微差别还要脆弱.

如果问题是您希望只读字段看起来像禁用字段,那么用只读属性集设置输入的样式非常容易.您无需更改行为即可更改外观.

input[readonly] {
  background: #EEE;
  color: #666;
  border: solid 1px #CCC;
}
<input readonly value="I am readonly">

猜你在找的HTML相关文章