<div contenteditable="true"> <div>bold text</div><div>bold text</div> </div>
如果我将光标定位在两个div之间并开始输入,则文本将以粗体显示,而不是在两个div之间插入新的文本节点.如果你回到家并尝试在第一个div前面输入一些东西,也会发生同样的情况.它成为第一个div的一部分.
如果我检查从选择返回的范围的startContainer,我得到一个div的内容而不是我期望的空文本节点.
见这http://jsfiddle.net/9ZZpX/3/
问题是为什么会发生这种情况？如何选择div之间的位置,以便在输入内容时不会加粗？ (显然我可以添加一个空间,这可以解决问题,但这很难看.)
如果您在状态更新框中输入@mention并按HOME,则可以在Facebook上看到此工作正常.如果键入文本将不会突出显示.
我唯一能想到的是拦截按键并以编程方式插入文本节点,但这看起来很难看.
我疯狂地搜索,找不到任何能证明这是如何工作的参考资料.显然有一些我不理解的东西,而且这方面的文档确实缺乏.
(我希望能够做的是检测光标即将进入其中一个div并跳过它.如果两个div正好相邻,则光标会跳转到其中一个div中搞砸了工程.)
关于我正在尝试做什么的更多信息：http://a-software-guy.com/2012/12/the-horrors-of-cursor-positioning-in-contenteditable-divs/
解决方法
这在任何地方都没有记录. current Selection spec没有说明这一点,主要是因为当浏览器实现其选择API时没有规范,并且当前规范没有统一的行为来记录.
一种选择是按照您的建议拦截按键事件,但这在用户使用编辑或上下文菜单粘贴内容时无效.另一种方法是使用鼠标和键事件跟踪选择,创建具有零宽度空格字符的元素,以便放置插入符号,并在必要时将插入符号放在一个元素中.如你所说,丑陋.
