gpt4 book ai didi

javascript - 如何在 contenteditable div 中聚焦于

转载 作者:行者123 更新时间:2023-12-02 14:07:31 24 4
gpt4 key购买 nike

我正在使用 contenteditable div 来制作丰富的编辑器。我现在的问题是我无法将插入符号定位在 <p> 上就在我嵌入 Instagram 框架之后。我尝试的是创建新的 <p>嵌入 Instagram 框架后将注意力集中在它上。但它不起作用。

有人知道这个问题的解决办法吗?

I make JSFiddle as example(我在 CSS block 中放入了嵌入代码之一)

最佳答案

尽管 contenteditable spec 声明应该可以将光标放置在空 p 标记内,如下所示:

<div>aaa<p>|</p>bbb</div>

Webkit (Safari) 和 Blink (Chrome) 目前不支持。更多信息here

幸运的是,有一个相对简单的解决方法。我们只需要获取 p 标签内的一些内容,以便将光标放置在此处。一种选择可能是附加包含 Zero Width Space 的文本节点。这种方法有时对于涉及内联标记的情况很有用。

就您而言,最有效的解决方案是简单地在段落中附加换行符。 Contenteditable 实现通常将 block 标签内的换行符视为“临时保持节点”,并且默认处理在主要浏览器中是相同的。初始结果应如下所示:

<div>aaa<p>|<br></p>bbb</div>

一旦您开始输入,BR就会被替换(浏览器会自动执行此操作):

<div>aaa<p>inner text|</p>bbb</div>

即使您删除了内部文本,浏览器也应该自动重新插入换行符,因此您始终能够将光标放回内部。

我已经用一个示例 here fork 并更新了您的 jsfiddle 。

关于javascript - 如何在 contenteditable div 中聚焦于 <p>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39916402/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com