如何使光标忽略Firefox中的伪元素？-解网

问：

在Firefox中，如果光标是这样开始的

`123`|

我按左箭头 2 次，我希望它落在：2

 `1|23`

如果伪元素不存在，它就会有。

有什么想法吗？

.code {
  font-family: monospace;
  background: rgba(0, 0, 0, 0.05);
}

.pseudo-ele::after {
  content: "3";
}

<div contenteditable>
  <span>`</span><span class="code pseudo-ele">12</span><span>`</span>
</div>

JavaScript HTML CSS

不幸的是，该功能仍未得到充分说明，我们离互操作还很远。这里发生的情况是，FF 确实允许通过将插入符号向右移动到前一个元素的末尾，或者通过将插入符号向左移动到下一个元素的开头。您可以通过对这两个元素进行不同的着色来了解这一点： jsfiddle.net/m9qfwy72 从这个特征来看，当中间有一个伪元素时，它们的行为是有道理的。不幸的是，我没有看到任何解决方法......

答：

-1赞 Caden Finkelstein 11/17/2023 #1

这是行不通的，因为允许编辑 HTML 本身，因此伪元素也被编辑。您必须更改在页面上编辑 HTML 的方式，以允许它在 FireFox 上工作。contenteditable

若要在除 Firefox 之外的所有浏览器上修复此问题，请使用以下方法：

.code {
  font-family: monospace;
  background: rgba(0, 0, 0, 0.05);
}

.pseudo-ele::after {
  content: "3";
  pointer-events: none;
}

<div contenteditable>
  <span>`</span><span class="code pseudo-ele">12</span><span>`</span>
</div>

上一个：在 div 内的锚点上多次悬停不起作用，但在 div 本身上工作正常

下一个：如何让 href 标签只影响滚动框而不影响整个页面？[关闭]

如何使光标忽略Firefox中的伪元素？

How to make cursor ignores pseudo elements in Firefox?

评论