获取那些内容可选但不可编辑、呈灰色的输入元素

Question

更新内容：

我刚刚注意到Chrome和Firefox实际上已经通过readonly属性实现了我想要的效果：不可编辑、可选中且显示为灰色。问题在于，在Pale Moon浏览器上，readonly输入框没有显示为灰色。

我暂时保留此问题开放，以便有人能提供更多信息或见解。

更新2：

不，实际上在Chrome和Firefox上，readonly输入框也没有被自动灰显。我之前产生了混淆，因为在MDN页面上，有一段站点CSS代码使得readonly输入框看起来是灰色的……（使用了:read-only伪类，而这个伪类在Pale Moon浏览器上不受支持）。

原始问题：

我有一些和</code>元素，在某些步骤中不应允许用户编辑它们的内容。 最初，我给这些元素添加了<code>disabled</code>属性。这样，元素变得不可编辑，并且呈现为灰色。这种表现是符合预期的。 然而，我需要这些内容可以被选中，但<code>disabled</code>属性会导致内容无法被选中。因此，我改用了<code>readonly</code>属性。虽然元素仍然不可编辑，内容也可以被选中，但它们不再自动呈现为灰色了。 所以，我正在寻找一种方法来实现元素的以下特性：不可编辑、可选中且呈现为灰色。 <ul><li>我可以应用一些CSS样式来实现，但我更倾向于使用浏览器对禁用输入框的原生样式。</li> <li>这些元素并不属于<code><form></code>表单的一部分，因此无需担心表单提交的问题。</li></ul>

The fourth bird · Answer

为了实现既不可编辑、可选中又呈现为灰色的元素效果，同时不使用disabled属性，你可以结合CSS和readonly属性来达成目的。你可以对readonly元素进行样式设计，让它们看起来像是被禁用的，同时保持内容可被选中。下面是一个如何实现这一目标的示例：

input[readonly],
textarea[readonly] {
    color: #777; /* 将文本颜色设置为柔和的颜色 */
    background-color: #eee; /* 将背景颜色设置为浅灰色 */
    cursor: not-allowed; /* 显示不允许的光标，指示不可编辑状态 */
}

/* 如有需要，调整textarea的样式 */
textarea[readonly] {
   resize: none; /* 禁止调整textarea大小 */
}

不幸的是，不同浏览器中禁用输入框的原生样式可能有所差异，而且没有直接的方法能在保持内容可选中的同时达到完全相同的禁用样式外观。

然而，你可以通过上述样式的组合，接近禁用输入框的外观，同时仍保持内容可被选取的特性。

fredoverflow · Answer

实现这一需求有多种方法：

1. 你可以在元素中同时保留readonly和disabled两个属性，如果你希望仅使用HTML解决方案的话。例如：

每当你需要启用该元素时，可以通过JavaScript移除这两个属性：

// 启用元素
document.getElementById("yourElementId").removeAttribute("readonly");
document.getElementById("yourElementId").removeAttribute("disabled");

反之，如果要禁用元素，则重新设置这两个属性：

// 禁用元素
document.getElementById("yourElementId").setAttribute("readonly", true);
document.getElementById("yourElementId").setAttribute("disabled", true);

2. 或者，你可以仅保留readonly属性以确保内容不可编辑但可被选中，并创建一个CSS类选择器规则来调整元素的透明度以模拟灰色状态。例如：

.greyed {
  opacity: 0.5;
}

鉴于你在整个流程的某些步骤中只需要readonly属性，你可以根据需要为元素添加或移除这个自定义类。例如：

document.getElementById("yourElementId").classList.toggle("greyed");

如果元素已包含该类，则调用此方法会移除该类，反之亦然。若要使元素再次显得活跃，除了移除类之外，还可以移除readonly属性：

document.getElementById("yourElementId").removeAttribute("readonly");

3. 你还可以完全不使用readonly和disabled属性，而是创建一个CSS规则来综合满足所有需求。例如：

.disabled {
  user-select: auto;
  pointer-events: none; /* 使用箭头光标 */
  cursor: default; /* 或使用此行替代上一行，确保所有光标都为默认样式 */
  opacity: 0.5;
}

同理，每次需要启用或禁用元素时，只需像之前那样切换这个类即可：

document.getElementById("yourElementId").classList.toggle("disabled");

以上任何一种建议都能达到你的要求。

lukasgeiter · Answer

感谢你们的回答。我最终决定在HTML中保留readonly属性，并添加了以下CSS，其中使用了:read-only伪类：

input:not([type]):read-only,
input[type="text"]:read-only,
textarea:read-only {
    background-color: #F2F2F2;
}

这段代码很简单（无需JavaScript），虽然没有完全复制“禁用”元素的外观，但结果非常可接受，并且在不同浏览器中表现一致。而且它还易于定制。

编辑: 针对这个应用场景，你可以将:read-only替换为[readonly]，以匹配readonly属性；功能上应该是等价的（参见MDN上的概述部分）。