我一直在搜索很多,但我找不到一种方法来获取内容可编辑div上插入符号的(X,Y)坐标,网上有很多关于此的内容,但问题没有一个页面我发现根据div的顶部得到坐标,所以我的问题更简单:
如何在一个contenteditable div上得到插入符号的(X,Y)坐标,但是Y坐标必须根据div的顶部而不是从页面可见部分的顶部计算?
注1:我特别需要Y坐标.
注2:我只能使用纯javascript,没有JQUERY.
我的方式:
我没有找到直接的方法来做到这一点,所以作为一种解决方法,我想根据页面的可见部分和Div的隐藏部分获得Y坐标并对结果求和(我正在研究这个但我没有运气!).
我正在开发一个富文本编辑器。我想当用户ctrl+space在触发事件的位置按下按键时打开用户定义的上下文菜单。
我没有得到事件的坐标。有没有可能获得事件坐标?
这是我的示例代码
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<style>
#edit{
border:1px solid red;
width:500px;
height:300px;
}
#ctxMenu{
display: none;
position: absolute;
border: 1px solid #000000;
}
#ctxMenu ul li{
list-style: none;
}
</style>
</head>
<body>
<div id="edit" contenteditable="true">
</div>
<div id="ctxMenu">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
<script>
$('#edit').keydown(function(e){
/**** get x, y coordinates.
*
*/
if (e.ctrlKey && e.keyCode == 32) {
$('#ctxMenu').show().css({left:x,top:y});
}
});
</script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)