跨浏览器:禁用的输入字段的行为不同(文本可以/不能复制) [英] Cross-Browser: Different behaviors for disabled input fields (the text can/can't be copied)

问题描述

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

I have a input html field that is disabled. In some browsers (Chrome, Edge, Internet Explorer and Opera) is possible to select and copy the text but, at least, in Firefox it is not possible.

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

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

我阅读了，，此处表示禁用的输入元素不可使用且不可点击，并且在

I read in here that disabled fields can be focus, here that A disabled input element is unusable and un-clickable and in here that A read-only input field cannot be modified (however, a user can tab to it, highlight it, and copy the text from it).

我什么都没说，不能复制来自禁用输入的文本.

I didn't find anything saying that the text from disabled inputs can't be copied.

这是一种标准行为，某些浏览器不尊重它，或者浏览器可以选择是否禁止复制来自禁用输入的文本?

There is standard behavior and some browsers are not respecting it or can the browsers choose if the text from a disabled input can or can't be copied?

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

And there is a solution for allowing, in all browsers, the text from a disabled input field to be copied?

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

它表明唯一具有独特行为的浏览器是firefox.我在此处中打开了一个问题，试图了解是设计选项还是是一个错误.我正在等待答案.

It seams that the only browser that has a distinct behavior is firefox. I opened an issue in here trying to understand if is a design option or if is a bug. I'm waiting now for an answer.

推荐答案

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

Change your field from disabled to readonly. That is the correct attribute for the behaviour you want.

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

Don't waste time hacking a javascript solution together as it will be even more flaky than the minor differences in browser behaviour.

如果问题是您希望只读字段看起来像禁用字段，则可以很容易地设置具有 readonly 属性集的输入样式.您无需更改行为即可更改外观.

If the issue is that you want your readonly fields to look like disabled fields, it's fairly easy to style an input with a readonly attribute set. You don't need to change behaviour to change appearance.

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

<input readonly value="I am readonly">

这篇关于跨浏览器:禁用的输入字段的行为不同(文本可以/不能复制)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！