如何专注于可信的div中的<p>

时间:2016-10-07 11:42:35

标签: javascript html contenteditable caret

我正在使用contenteditable div来制作丰富的编辑器。 我现在的问题是,在嵌入Instagram框架后,我无法在<p>上找到插入符号。 我尝试创建新的<p>并在嵌入Instagram框架后专注于它。但它不起作用。

有谁知道这个问题的解决方案?

I make JSFiddle as example (我把一个嵌入代码放在CSS块中)

1 个答案:

答案 0 :(得分:2)

虽然有意见的spec声明应该可以将光标放在一个空的p标签中,如下所示:

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

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

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

在您的情况下,最有效的解决方案是简单地在段落中添加换行符。 Contenteditable实现通常将块标记内的换行符视为临时保留节点&#34;,并且主要浏览器的默认处理方式相同。初始结果应如下所示:

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

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

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

即使您删除了内部文本,浏览器也会自动重新插入换行符,这样您就可以始终将光标放回原位。

我已经通过示例here分叉并更新了您的jsfiddle。