使用 JavaScript / jQuery 获取按键上的 X,Y 坐标

Ram*_*o M 8 javascript contenteditable


我正在开发一个富文本编辑器。我想当用户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)

小智 0

也许 caret() 就是您正在寻找的(pageX 和 pageY 不适用于 div);以下链接可能有帮助:

jQuery:无需浏览器特定代码即可获取输入中文本的光标位置?

如果你想使用文档坐标,你可以使用以下内容,但它会响应页面上任何地方的按键,而不仅仅是文本区域(如果你使用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
     }
 });
Run Code Online (Sandbox Code Playgroud)