Mik*_*ike 17 javascript text cross-browser contenteditable
我的任务是将文本插入符设置为显示在contentEditablediv中的空span节点内.
以下为我在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上,重点是倒数第二个跨度.不知道为什么.如果我在最后一个跨度内放置一个空格,那么它可以工作,但我得到一个单字符范围选择.
话虽如此,如果插入符号一开始就在最后一个节点中有空格是可以接受的.
任何有关这方面的帮助将不胜感激.先感谢您.
sha*_*evi 11
将元素设置innerHTML为零宽度字符:
('element').innerHTML = 'ÈB';
现在,carret可以去那里.
IE的选择/范围模型基于文本内容的索引,忽略元素边界.我相信可能无法将输入焦点设置在没有文本的内联元素中.当然,在您的示例中,我无法通过单击或箭头键在最后一个元素内设置焦点.
它几乎可以工作,如果你设置每个跨度display: block,虽然仍然有一些非常奇怪的行为,取决于父级中是否存在空格.黑客将显示内容与浮点,内联块和绝对位置等技巧内联,使IE将每个元素视为一个单独的编辑框.相对定位的块元素彼此相邻,但这可能是不切实际的.
如果它让你感觉更好,IE9终于修复了这种不愉快并采用标准范围模型.(万岁!)
如果插入符号一开始就在最后一个节点中有空格是可以接受的.
那么,我可能会这样做,除非IE选择专家能想到更好的东西.(打电话给蒂姆!)
| 归档时间： |
|
| 查看次数： |
10875 次 |
| 最近记录： |