考虑以下CONTENTEDITABLE股利。
<div contenteditable="true">
<div>bold text</div><div>bold text</div>
</div>
如果我定位两个div之间光标并开始键入文本出来大胆而不是插入的两个div之间一个新的文本节点。 如果你打回家,并尝试输入第一个div的面前的东西同样的情况。 它成为第一个div的一部分。
如果我检查该从选择中返回的范围的startContainer,我得到div的,我会期望一个空的文本节点,而不是一个内容。
看到这个http://jsfiddle.net/9ZZpX/3/
问题是,为什么会发生这种情况? 如何选择的div之间的点,这样,当我输入的东西它不大胆? (很明显,我可以添加一个空格和工作解决问题,但是那是相当难看。)
你可以看到这个Facebook的正常工作,如果你在状态更新框,然后按HOME进入@mention。 如果您键入的文本将不会高亮显示。
唯一我能想到的是拦截按键和编程方式插入一个文本节点,但似乎丑陋。
我搜索像疯了似的,找不到该文件,这是真的应该如何工作的任何引用。 显然有一些我不明白和文档在这方面确实欠缺。
(我希望能够做的一样好是当光标即将进入这些div之一,并跳过它检测。如果两个div紧挨着对方,光标跳转到的div之一,它渣土起来的作品。)
在我想要做的更多信息: http://a-software-guy.com/2012/12/the-horrors-of-cursor-positioning-in-contenteditable-divs/
浏览器是在这个不一致。 Firefox将让你的位置插入符号在比大多数浏览器,但WebKit和IE多个位置都有关于有效插入符号位置明确的想法,并会修改你添加到选择一个范围,以符合最近的有效位置。 这有一定道理:具有不同的文件位置,因此对行为相同的视觉插入符号的位置是混淆用户。 然而,这是以灵活性为开发商的成本。
这是不记录任何地方。 在当前选择的规格也不说了,主要是因为没有规范存在了,当浏览器中实现他们的选择API,并没有统一的行为,当前规范记录。
一种选择是拦截keypress
事件,你认为,虽然使用编辑或上下文菜单中的内容的用户粘贴时这不会帮助。 另一个办法是跟踪使用鼠标和键盘事件的选择的,创建,比方说,用于将插入符零宽度空格字符被放置在元件并在必要时将插入符号在一个那些元素。 正如你所说的,丑陋的。
我的回答将是只是一个除了Tim的一个,这是全面的。
AFAIK Facebook并没有使用内容编辑。 状态箱由简单的textarea和它下面的div层上,他们渲染缺口蓝色rects的。
虽然,即使他们做到了,这将是一个不同的情况下,由于缺口将与内联元素的情况是简单:)是一个内联元素和幸运。
关于在人迹罕至的地方定位插入符号 - 在CKEditor的,我们有同样的问题。 有许多地方,用户不能移动插入符号。 我们决定来解决这个问题有一个插件叫做魔线 。 正如你可以在演示中看到,我们完全绕过与选择的问题,我认为这是解决这一问题的最佳途径。 这是非常有用和CKEditor的4.0.1将是(并且已经是高手 )也通过按键完全访问。
你可以做的另一件事是使用突变观察员赶上突变,然后在事后解决这些问题了。 在我的使用情况下,我是幸运的,每个元素有预定义的文本。 当观察者突变火灾,我干脆搬到更改的文本到一个新的文本节点之前或元素的适当后。 这似乎不是因为观察者的火灾使所有更改字符数据的其他选项轻松了许多,也拥有所有的变化,适当记录,不像说的按键事件。
文章来源: How to set caret/cursor position in a contenteditable div between two divs.