5


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

4 回答 4

1

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

或者

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});
  });
});
于 2013-06-12T12:30:46.850 回答
1

要获取键盘事件的 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});
     }
 });
于 2017-01-04T10:52:31.560 回答
0

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

于 2013-06-17T15:10:48.103 回答
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
     }
 });
于 2013-06-12T11:50:26.737 回答