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">

Answer 2

禁用表单控件时这样做没有错。

<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: user-select:

快捷事件处理程序：

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);

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

最终想法：

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

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

Answer 3

我尝试在输入中使用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>

注意：您必须设置div的样式，使其更像是禁用的输入。

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

3 个答案: