Chrome 双击并按Shift+箭头键选择contentEditable div中的多个元素

qf9go6mv 于 2023-10-14 发布在 Go

关注(0)|答案(1)|浏览(156)

当您根据以下代码双击Chrome显示的内容中的there或将光标置于H左侧并按CTRL + right arrow key时，选择范围将扩展到所有文本。

<div contentEditable="true">Hi<strong>1</strong>there<span>2</span>you</div>

然而，在第一种情况下，它应该只选择there，在第二种情况下，它应该只选择Hi。
这种行为只能用CSS来纠正吗？还是JavaScript的最坏情况？注意：无法向可编辑文本区域添加新符号。
JSFiddle：https://jsfiddle.net/7o6ykLt0/19/
双击there时的预期结果：

实际结果：

google-chrome

来源：https://stackoverflow.com/questions/77281471/double-click-and-shiftarrowkey-selects-multiple-elements-in-contenteditable-div

1条答案

按热度按时间

mrfwxfqh1#

按照Heretic Monkey的建议，您可以在单词之间插入&ZeroWidthSpace;：

<div contentEditable="true">Hi&ZeroWidthSpace;<strong>1</strong>&ZeroWidthSpace;there&ZeroWidthSpace;<span>2</span>&ZeroWidthSpace;you</div>

也可以动态插入这些字符：

for (var node of document.querySelector("div[contenteditable]").childNodes)
  if (node.nodeType === Node.TEXT_NODE)
    node.nodeValue = "\u200b" + node.nodeValue + "\u200b";

<div contentEditable="true">Hi<strong>1</strong>there<span>2</span>you</div>

赞(0）回复(0）举报 2023-10-14

我来回答

Chrome 双击并按Shift+箭头键选择contentEditable div中的多个元素

1条答案

相关问题

热门标签

最新问答