将插入符位置设置为contentEditable元素中的空节点 [英] Setting the caret position to an empty node inside a contentEditable element
问题描述
我的任务是设置一个文本插入符号出现在 contentEditable div中的一个空的span节点内。
My task is to set a text caret to appear inside an empty span node within a contentEditable div.
以下在Firefox 3.6上没有问题：
The following gives me no problems on Firefox 3.6:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="js/jquery-1.4.3.min.js">
</script>
<style>
#multiple {
border: 1px solid #ccc;
width: 800px;
min-height: 20px;
padding: 5px;
outline: none;
}
</style>
<script>
$(document).ready(function(){
var contentEditable = document.getElementById('multiple');
var lastItem = contentEditable.getElementsByTagName('span').item(2);
var selectElementText = function(el, win){
win = win || window;
var doc = win.document, sel, range;
if (win.getSelection && doc.createRange) {
range = doc.createRange();
range.selectNodeContents(el);
range.collapse(false);
sel = win.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
else
if (doc.body.createTextRange) {
range = doc.body.createTextRange();
range.moveToElementText(el);
range.select();
}
}
contentEditable.focus();
selectElementText(lastItem);
});
</script>
<title>Range Selection Tasks (Make Me Want to Cry)</title>
</head>
<body>
<div id="multiple" contentEditable="true">
<span style="color:red">First</span><span style="color:green">Second</span><span style="color:blue"></span>
</div>
</body>
</html>
...但是在Webkit和IE上，焦点设置为 span。不知道为什么。它的工作原理，如果我在最后一个span内部一个空格，但然后我得到一个字符范围选择。
... but on Webkit and IE, the focus is set to the penultimate span. No idea why. It works if I put a space inside the last span, but then I get a one-character range selection.
说完之后，如果插入符号在最开始就可以在最后一个节点中有空格。
Having said that, it's acceptable to have whitespace in the last node if the caret is at the very start.
任何帮助，这将是非常感激。提前感谢。
Any help with this would be greatly appreciated. Thank you in advance.
推荐答案
IE的选择/范围模型基于文本内容的索引，忽略元素边界。我相信可能不可能在一个没有文本的内联元素中设置输入焦点。当然，在你的例子中，我不能通过单击或箭头键在最后一个元素内设置焦点。
IE's selection/range model is based around indexes into text content, disregarding element boundaries. I believe it may be impossible to set the input focus inside an inline element with no text in it. Certainly with your example I cannot set focus inside the last element by clicking or arrow keys.
如果将每个span设置为 block ，但仍然有一些非常奇怪的行为，这取决于父对象中是否存在空格。黑客的显示内容看起来像浮动，内联块和绝对位置的技巧，使得IE将每个元素作为一个单独的编辑框。相对位置的块元素彼此相邻工作，但这可能是不切实际的。
It almost works if you set each span to display: block, though there's still some highly strange behaviour, dependent on the existence of whitespace in the parent. Hacking the display to look inline with tricks like float, inline-block and absolute position make IE treat each element as a separate editing box. Relative-positioned block elements next to each other work, but that's probably impractical.
如果它让你感觉更好，IE9终于解决了这个不愉快，并采用标准范围模型。 （Hooray！）
If it makes you feel any better, IE9 finally fixes this unpleasantness and adopts the standard range model. (Hooray!)
如果插入符号在最开始，在最后一个节点中可以有空格。
it's acceptable to have whitespace in the last node if the caret is at the very start.
我可能会这样做，除非一个IE选择专家能想到什么更好。 （调用Tim Down！）
I'd probably do that, then, unless an IE selection expert can think of anything better. (Calling Tim Down!)
这篇关于将插入符位置设置为contentEditable元素中的空节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
