跨浏览器：禁用输入字段的行为不同（文本可以/不能复制）

Question

我有一个禁用的输入html字段。在某些浏览器（Chrome，Edge，Internet Explorer和Opera）中，可以选择和复制文本，但是至少在Firefox中是不可能的。您可以通过在不同的浏览器中执行以下代码来对其进行测试：<input type="text" disabled value="is disable">  <input type="text" readonly value="is readonly">我读在这里该禁用字段可以是焦点，这里其被禁用的输入元件是不可用的和未可点击和在这里的是一个只读输入字段不能被修改（然而，用户可以标签给它，突出显示它，并从中复制文本）。我没有发现任何内容表明不能复制来自禁用输入的文本。这是一种标准行为，某些浏览器不遵守该行为，或者浏览器可以选择是否禁用禁用输入中的文本？有一种解决方案允许在所有浏览器中复制来自禁用输入字段的文本？注意：我的应用程序是使用Angular / TypeScript语言实现的。它表明唯一具有独特行为的浏览器是firefox。我在这里打开一个问题，试图了解是设计选项还是错误。我正在等待答案。

Answer 1

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

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

如果问题是您希望只读字段看起来像已禁用字段，则使用readonly属性集设置输入的样式相当容易。您无需更改行为即可更改外观。

input[readonly] {

  background: #EEE;

  color: #666;

  border: solid 1px #CCC;

}

<input readonly value="I am readonly">

Answer 2

我尝试user-select在输入中使用，但是它不能阻止选择文本。即使div使用某种user-select: none样式将其包装为仍然无法正常工作。它仅适用于（我认为）不可聚焦的元素，例如div，span等。

但是，现在，我认为user-select: none如果要确保即使在许多不同的浏览器中用户也不会从页面复制文本（检查用户选择的浏览器的兼容性），则这是唯一更好的选择。因此，我建议创建一个类似于以下内容的组件：

<input  *ngIf="!isDisabled" value="model" />

<div *ngIf="isDisabled" style="user-select: none">{{model}}</div>

Answer 3

禁用表单控件时，这样做没有任何问题。

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

或者

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

但是，这可能不会产生一致的行为，因为它与复制文本有关（选择后）。

不完美的JavaScript方式：

我已经有select一段时间没有使用类型事件了，但是我建议切换选择文本的功能。您可能还会玩focus和blur事件。

外部CSS样式表：

.preventSelection {user-select: none}  // IE 10+

W3Schools：用户选择：

快速和肮脏的事件处理程序：

function preventDisabledControlTextCopy(e)

{

    // blah, blah, blah

    if (e.target.disabled === true) {

        // Add "preventSelection" to e.target.className

        // Alternatively, change the focus to somewhere else!

    } else {

        // Remove "preventSelection" from e.target.className

    }

}

// Blah, blah, blah-blah blah

textBox.addEventListener("select", preventDisabledControlTextCopy, false);

寻找选择永远不会浪费时间。我跳过了许多细节，但是我把重要的部分明确了（因为Stackoverflow是人们用来学习事物的工具）。具体实施取决于您。

最后的想法：

最佳答案可能是使用CSS和JavaScript并切换visibility: hidden（IE 4+）或display: none（IE 8+），具体取决于您的方案，DOM结构和您能够管理的复杂性。

动态表单是体验HTML，CSS和JavaScript之间相互作用的好方法。