如何在两个div之间的contenteditable div中设置插入符号/光标位置。 [英] How to set caret/cursor position in a contenteditable div between two divs.
问题描述
请考虑以下contenteditable div。
Consider the following contenteditable div.
<div contenteditable="true">
<div>bold text</div><div>bold text</div>
</div>
如果我将光标放在两个div之间，并且开始输入，新文本节点在两个div之间。如果你打回家并尝试在第一个div前面键入内容，也会发生同样的情况。它成为第一个div的一部分。
If I position the cursor between the two divs and start typing the text comes out bold instead of inserting a new text node between the two divs. The same happens if you hit home and try to type something in front of the first div. It becomes part of the first div.
如果我检查从选择返回的范围的startContainer，我得到的一个div的内容，而不是一个空
If I inspect the startContainer of the range that's returned from the selection, I get the content for one of the div's instead of an empty text node as I would expect.
请参阅此 http： //jsfiddle.net/9ZZpX/3/
问题是为什么会发生这种情况？如何选择div之间的位置，以便当我输入的东西，它不是大胆的？ （显然，我可以添加一个空格，并解决这个问题，但是很丑陋。）
The question is why does this happen? How can I select the spot between the divs so that when I type something it does not bold? (Obviously I can add a space and that works around the problem but that's quite ugly.)
如果你在Facebook输入@mention，状态更新框，然后按HOME。
You can see this working correctly at Facebook if you enter an @mention in a status update box and press HOME. If you type the text will not get highlighted.
我唯一能想到的是拦截按键并以编程方式插入一个文本节点，但这似乎很丑。
The only thing I've been able to think of is intercepting the keypress and inserting a text node programmatically but that seems ugly.
我搜索起来很疯狂，没有找到任何文档说明这是真正应该工作的参考。显然有些东西我不明白，文档在这方面真的缺乏。
I searched like crazy and can't find any references that document how this is really supposed to work. There is obviously something that I do not understand and the documentation is really lacking in this area.
（我想要做的也是检测光标正在进入其中一个div并跳过它，如果两个div是彼此相邻的，光标跳进一个div，并且它工作了。）
(What I want to be able to do as well is detect when the cursor is about to enter one of these divs and jump over it. If the two divs are right next to each other, the cursor jumps into one of the divs and it mucks up the works.)
有关我要做什么的更多信息： http://a-software-guy.com/2012/12/the-horrors-of-cursor-positioning-in-contenteditable-divs/
More info on what I'm trying to do: http://a-software-guy.com/2012/12/the-horrors-of-cursor-positioning-in-contenteditable-divs/
推荐答案
浏览器在此方面不一致。 Firefox将允许您将插入符放置在比大多数浏览器更多的位置，但WebKit和IE都有关于有效插入符位置的明确想法，并将修改您添加到选择范围以符合最近的有效位置的范围。这是有意义的：具有不同的文档位置并且因此对于相同的视觉插入符位置的行为对于用户是混乱的。但是，这是以开发人员的不灵活性为代价的。
Browsers are inconsistent on this. Firefox will let you position the caret in more positions than most browsers but WebKit and IE both have definite ideas about valid caret positions and will amend a range you add to the selection to conform to the nearest valid position. This does make sense: having different document positions and hence behaviours for the same visual caret location is confusing for the user. However, this comes at the cost of inflexibility for the developer.
这在任何地方都没有记录。 目前的选择规范没有说明，主要是因为没有规范存在当浏览器实现了它们的选择API，并且没有统一的行为为当前规范文档。
This is not documented anywhere. The current Selection spec says nothing about it, principally because no spec existed when browsers implemented their selection APIs and there is no uniform behaviour for the current spec to document.
一个选项是拦截 keypress 事件，虽然这将无法帮助当用户使用编辑或上下文菜单粘贴内容。另一种方法是使用鼠标和键事件来跟踪选择，使用零宽度空格字符创建元素，以便在必要时将插入符放入并将插入符放在一个元素中。正如你所说，丑陋。
One option would be to intercept the keypress event as you suggest, although this will not help when the user pastes in content using the edit or context menus. Another would be to keep track of the selection using mouse and key events, create elements with, say, a zero-width space character for the caret to be placed in and place the caret in one those elements when necessary. As you say, ugly.
这篇关于如何在两个div之间的contenteditable div中设置插入符号/光标位置。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
