我已经阅读了一些关于定位光标的帖子，但没有一个能回答我的特定问题。
问题：我希望光标在div2中出现在与div1完全相同的位置
所以，我需要一种方法来读取用户单击div1时的位置，并且在div2出现时将光标/插入点放置在相同的位置，因此需要一组getCaretLocation(in_div_id)和setCaretLocation(in_div_id)函数。
有什么方法可以做到吗？
谢谢 -
简短回答：你不能。
详细回答：你将面临的问题是，你可以获得div1上点击事件的(x,y)坐标，但任何实现光标位置的操作都需要你知道内容中光标的位置（即光标之前的字符数）。
要将(x,y)坐标转换为字符位置，你实际上需要知道光标之前有多少个字符（即当前行和上方剩余的字数，如果文本是从左到右）。
如果你使用固定宽度的字体，你可以简化问题：将(x,y)坐标映射到字符网格上的(line, column)坐标。
然而，你仍然面临不知道文本如何换行的问题。例如：
------------------
|Lorem ipsum |
|dolor sit amet |
|consectetur |
|adipiscing elit |
------------------
你可以在第一个 div 上设置临时内容可编辑，以捕获光标位置。
$('div1').hover(function()
{ $(this).attr('contenteditable','true');
},function()
{ $(this).removeAttr('contenteditable');
}).mouseup(function()
{ var t = $(this);
// get caret position and remove content editable
var caret = t.getCaret();
t.removeAttr('contenteditable');
// do your div switch stuff
...
// and apply saved caret position
$('div2').setCaret(caret);
});
现在只需要获取/设置插入符号的方法 :)
编辑 > 这是我的自己的方法，（演示）
getSelection:function($e)
{ if(undefined === window.getSelection) return false;
var range = window.getSelection().getRangeAt(0);
function getTreeOffset($root,$node)
{ if($node.parents($root).length === 0) return false; // is node child of root ?
var tree = [], treesize = 0;
while(1)
{ if($node.is($root)) break;
var index, $parent = $node.parent();
index = $parent.contents().index($node);
if(index !== -1) { tree[treesize++] = index; } $node = $parent;
}; return tree.reverse();
}
var start = getTreeOffset($e,$(range.startContainer));
var end = getTreeOffset($e,$(range.endContainer));
if(start & end === false) return false;
return {start:start,end:end,startOffset:range.startOffset,endOffset:range.endOffset};
}, setSelection:function($e,s,win)
{ $e.focus(); if(s === false) return; var sel = win.getSelection(); sel.removeAllRanges();
function getNode($e,s)
{ var node = $e;
for( var n=0;n<s.length;n++ )
{ var index = s[n]; if(index < 0) break;
node = node.contents(':eq('+index+')');
} return node.get(0);
}
var start = getNode($e,s.start), end = getNode($e,s.end), range = win.document.createRange();
range.setStart(start,s.startOffset); range.setEnd(end,s.endOffset); sel.addRange(range);
}