Javascript 如何在contentEditable div中获取插入符号x和y位置

获得活动插入符号x和y位置的简单方法是什么？我已经看到了关于如何获取索引位置的答案，但没有看到随着键入而更新的x和y。使用JQuery实现这一点的最佳方法是什么？

我在GitHub项目中发现了这段代码。我希望这是你所需要的

//我们复制到镜像div中的属性。
//请注意，有些浏览器，如Firefox，
//不要连接属性，即填充顶部、底部等->填充，
//因此，我们必须具体地处理每一个属性。
变量属性=[
“盒子大小”，
'width'，//在Chrome和IE上，不包括滚动条，因此镜像div的包装方式与textarea完全相同
“高度”，
“溢出x”，
'overflowY'，//复制IE的滚动条
“borderTopWidth”，
“borderRightWidth”，
“borderBottomWidth”，
“borderLeftWidth”，
“paddingTop”，
“paddingRight”，
"垫底",，
“paddingLeft”，
// https://developer.mozilla.org/en-US/docs/Web/CSS/font
“fontStyle”，
"字体变体",，
“fontWeight”，
“fontStretch”，
“字体大小”，
“线宽”，
“丰特家族”，
“textAlign”，
“文本转换”，
“文本缩进”，
“textDecoration”，//可能没什么区别，但最好是安全的
“字母间距”，
“字间距”
];
var isFirefox=！（window.mozInnerScreenX==null）；
var mirrorDivDisplayCheckbox=document.getElementById（'mirrorDivDisplay'）；
var mirrorDiv，计算，样式；
getCaretCoordinates=功能（元素、位置）{
//镜像div
mirrorDiv=document.getElementById（element.nodeName+'--mirrorDiv'）；
如果（！mirrorDiv）{
mirrorDiv=document.createElement（'div'）；
mirrorDiv.id=element.nodeName+'--mirrorDiv'；
文件.body.appendChild（mirrorDiv）；
}
style=mirrorDiv.style；
computed=getComputedStyle（元素）；
//默认文本区域样式
style.whiteSpace='pre-wrap'；
if（element.nodeName！==“输入”）
style.wordWrap='break word'；//仅适用于textarea-s
//屏幕外定位
style.position='absolute'；//需要正确返回坐标
style.top=element.offsetTop+parseInt（computed.borderTopWidth）+“px”；
style.left=“400px”；
style.visibility=mirrorDivDisplayCheckbox.checked？'visible'：'hidden'；//不是'display:none'，因为我们需要渲染
//将元素的属性传输到div
properties.forEach（函数（prop）{
样式[prop]=计算的[prop]；
});
如果（iFirefox）{
style.width=parseInt（computed.width）-2+'px'//Firefox在填充中添加了2个像素-https://bugzilla.mozilla.org/show_bug.cgi?id=753662
//Firefox对textareas的溢出属性撒谎：https://bugzilla.mozilla.org/show_bug.cgi?id=984275
if（element.scrollHeight>parseInt（computed.height））
style.overflowY='scroll'；
}否则{
style.overflow='hidden'；//使Chrome不呈现滚动条；IE保持overflowY='scroll'
}  
mirrorDiv.textContent=element.value.substring（0，位置）；
//输入type=“text”与textarea:space的第二个特殊处理需要用非中断空格替换-http://stackoverflow.com/a/13402035/1269037
if（element.nodeName==='INPUT'）
mirrorDiv.textContent=mirrorDiv.textContent.replace（/\s/g，“\u00a0”）；
var span=document.createElement（'span'）；
//包装必须完全复制*，包括长单词被复制时
//转到下一行，在（#7）之前的行末尾有空格。
//要做到这一点，唯一可靠的方法是复制文件的其余部分
//textarea的内容放入在插入符号位置创建的文本中。
//对于输入，只要“.”就足够了，但为什么要麻烦呢？
span.textContent=element.value.substring（位置）| |'。；/| | |，因为完全空的人造span根本不会渲染
span.style.backgroundColor=“浅灰色”；
镜像子对象（span）；
变量坐标={
顶部：span.offsetTop+parseInt（计算出的['borderTopWidth']），
左：span.offsetLeft+parseInt（计算出的['borderLeftWidth']）
};
返回坐标；
}

单击文本中的任意位置可看到红色垂直线&ndash；一个1像素的div，应该精确定位在插入符号的位置。插入符号的位置将记录在控制台中





显示镜像div

您需要添加一个keyup事件侦听器以div为目标。每次触发keyup事件时，您都会调用获取位置的方法。这是否回答了您的问题@不幸的是，布伦没有。我想要x和y位置。相对于什么，div，整个DOM视口的物理位置？你只是想得到行号和列号吗？@Bren整个视口