即使文本区域没有焦点，也能指示选定的文本

Posted 2023-03-06

【中文标题】即使文本区域没有焦点，也能指示选定的文本

【英文标题】：Indicating selected text even when the textarea doesn't have the focus

【发布时间】：2019-10-24 06:53:21

【问题描述】：

在 Firefox 和 Chrome 中，文本字段的文本选择（= 在字段中选择的文本范围）仅在该字段具有焦点时才会显示。即使字段没有焦点，选择确实存在 - 它可以从 javascript 查询，并且如果字段以不改变选择的方式重新获得焦点，它就会再次可见 - 但是，它对用户不可见。 （参见下面的示例代码 sn-p。在 <textarea> 字段中突出显示您想要的任何文本；然后使用 Tab 和 Shift+Tab 将焦点移开和移回。您的文本仅在该字段具有焦点时显示为选中状态。）

有没有办法覆盖这种行为？

一些注意事项：

我尝试使用带有规则的CSS's ::selection pseudo-element 来设置颜色和背景颜色，但这没有帮助；规则仅在字段具有焦点时应用。 我更喜欢只使用 html/CSS/JavaScript（无需用户干预），但我愿意在必要时使用浏览器设置。 我不在乎选择在没有焦点的情况下是否与有焦点的情况相同，只要它在两种情况下都可见。 我主要需要支持 Firefox，但如果可能的话，我也想支持其他现代浏览器。 我不关心是否在零的长度零时指示选择（=它只是光标位置）。

<textarea rows="2" cols="15">Hello, world!</textarea>

【问题讨论】：

如果不使用 contentEditable 元素代替 textarea，我无法想象这是可能的，但我对被证明是错误的可能性很感兴趣 :)

我建议也使用contentEditable。

【参考方案1】：

您是否尝试在 CSS 中使用 firefox 的特定选择元素？看起来该元素仅在 Firefox 中以这种方式实现（版本 2-61 之后已修复）：

::-moz-selection 

【讨论】：

没有骰子——与::selection 的行为相同（我使用的是 67 版）——但感谢您的尝试。 :-)