使用 JavaScript / jQuery 在 keydown 上获取 X，Y 坐标答案

【问题标题】：Get X,Y coordinates on keydown using JavaScript / jQuery使用 JavaScript / jQuery 在 keydown 上获取 X，Y 坐标
【发布时间】：2013-06-12 10:33:26
【问题描述】：

我正在开发一个富文本编辑器。当用户在触发事件的位置按下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>

【问题讨论】：

您在寻找什么坐标？相对于元素或页面？
@DarthVader 相对于元素最。如果不可能，至少到页面......或者你认为更好的那个。
stackoverflow.com/a/16304786/96100
@TimDown 它在文本选择上提供坐标，但在编辑器中输入时不提供坐标。
例如：jsfiddle.net/aSUSh/116

标签： javascript contenteditable

【解决方案1】：

HERE-JSFIDDLE 是您的 CODE 的输出。

或

JS 代码 （只需将您的 js 代码替换为以下代码即可。）

$(document).ready(function(){
  $('#edit').bind('keydown', function(e){
    var $this = $(this);
    var a = $this.data('mousepos').x;
    var b = $this.data('mousepos').y;
    if (e.ctrlKey && e.keyCode == 32) {  
        $('#ctxMenu').show().css({left:a,top:b});
    }else{
        $('#ctxMenu').hide();
    }
  });

  $('#edit').bind('mousemove', function(e){
    $(e.target).data('mousepos', {x: e.pageX, y: e.pageY});
  });
});

【讨论】：

菜单在鼠标光标所在的位置打开，而不是在文本光标处。但在我的情况下，它应该在文本光标处打开。用户可以在键入时按 ctrl+空格键在编辑器中。所以菜单应该只在那里打开。
好的，谢谢。期待您的回复。

【解决方案2】：

获取键盘事件的x,y：

$('#edit').keydown(function(e){
     var $target = $(e.target);
     var x = $target.offset().left;
     var y = $target.offset().top;
     if (e.ctrlKey && e.keyCode == 32) {
        $('#ctxMenu').show().css({left:x,top:y});
     }
 });

【讨论】：

【解决方案3】：

也许 caret() 是您正在寻找的（pageX & pageY 不适用于 div）；以下链接可能会有所帮助：

jQuery: Get the cursor position of text in input without browser specific code?

如果你想使用文档坐标，你可以使用下面的，但它会响应页面上任意位置的按键，而不仅仅是文本区域（如果你使用 div 代替，e.pageX 将是未定义的）

$(document).keypress(function(e)
{
     var code = (e.keyCode ? e.keyCode : e.which);
     if (e.ctrlKey && code == 32) 
     {
        alert(e.pageX); // for y use e.pageY
     }
 });

【讨论】：

【解决方案4】：

@Tim ，如果光标位置之后没有文本，则它不起作用。可能在光标处插入元素并找出相同的方法？我在 IE 8 中使用它，我发现 x 和 y 位置是零。我有一个内容可编辑的div，文本为“一二”。现在，如果我的光标在文本之间的任何位置，我会得到值，但如果它在两个都为零之后移动。插入元素然后查找也是没用。有cmets吗？

【讨论】：