将插入符号位置设置为 contentEditable 元素内的空节点 [英] Setting the caret position to an empty node inside a contentEditable element
问题描述
我的任务是将文本插入符号设置为出现在 contentEditable div 内的空跨度节点内.
以下在 Firefox 3.6 上没有问题:
<头><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><script type="text/javascript" src="js/jquery-1.4.3.min.js"><风格>#多 {边框:1px 实心 #ccc；宽度:800px；最小高度:20px；填充:5px；大纲:无；}</风格><脚本>$(document).ready(function(){var contentEditable = document.getElementById('multiple');var lastItem = contentEditable.getElementsByTagName('span').item(2);var selectElementText = function(el, win){赢=赢||窗户;var doc = win.document, sel, range;如果(win.getSelection && doc.createRange){范围 = doc.createRange();range.selectNodeContents(el);range.collapse(false);sel = win.getSelection();sel.removeAllRanges();sel.addRange(range);}别的如果(doc.body.createTextRange){范围 = doc.body.createTextRange();range.moveToElementText(el);范围选择()；}}contentEditable.focus();selectElementText(lastItem);});<title>范围选择任务(让我想哭)</title><身体><div id="multiple" contentEditable="true"><span style="color:red">第一</span><span style="color:green">第二</span><span style="color:blue"></span>;</html>
...但在 Webkit 和 IE 上，焦点设置在 倒数第二个 跨度.不知道为什么.如果我在最后一个跨度内放置一个空格，它会起作用，但随后我会得到一个字符范围选择.
话虽如此，如果插入符号在最开始，则最后一个节点中有空格是可以接受的.
对此的任何帮助将不胜感激.提前致谢.
IE 的选择/范围模型基于文本内容的索引，不考虑元素边界.我相信在没有文本的内联元素中设置输入焦点可能是不可能的.当然，在您的示例中，我无法通过单击或箭头键在最后一个元素内设置焦点.
如果您将每个跨度设置为 display:block，它几乎可以工作，尽管仍然存在一些非常奇怪的行为，这取决于父项中空格的存在.使用浮动、内联块和绝对位置等技巧使显示看起来内联，使 IE 将每个元素视为一个单独的编辑框.彼此相邻的相对定位块元素可以工作，但这可能不切实际.
如果它让您感觉更好，IE9 终于修复了这个不愉快并采用了标准范围模型.(万岁！)
<块引用>如果插入符号在最开始，则最后一个节点中有空格是可以接受的.
我可能会那样做，除非 IE 选择专家能想到更好的方法.(打电话给蒂姆！)
My task is to set a text caret to appear inside an empty span node within a contentEditable div.
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>
... 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'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.
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.
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.
I'd probably do that, then, unless an IE selection expert can think of anything better. (Calling Tim Down!)
这篇关于将插入符号位置设置为 contentEditable 元素内的空节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
