【问题标题】: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

标签: css focus textarea textselection


【解决方案1】:

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

::-moz-selection {

}

【讨论】:

  • 没有骰子——与::selection 的行为相同(我使用的是 67 版)——但感谢您的尝试。 :-)
猜你喜欢
  • 2021-03-24
  • 2011-05-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-02-06
  • 1970-01-01
相关资源
最近更新 更多