Question

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

Answer 1

HERE-JSFIDDLE是您的代码的输出。

OR

JS CODE （只需用以下代码替换你的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});
  });
});

Answer 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});
     }
 });

Answer 3

也许是caret（）就是你要找的东西（pageX＆amp; pageY不适用于div）;以下链接可能有所帮助：

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

如果你想使用文档坐标，你可以使用以下内容，但它会响应页面上任何地方的按键，而不仅仅是textarea（如果使用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
     }
 });

Answer 4

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

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

4 个答案: