Get X,Y coordinates on keydown using JavaScript / jQuery

Question

I am developing a rich text editor.I want to open a user-defined context menu when the user presses ctrl+space key at the position where the event is triggered.
I am not getting the co-ordinates of the event. Is there any possibility to get the event coordinates?
Here is my sample code

<!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>

what coordinates are you looking for? relative to the element or the page? — , Jun 12 '13 at 11:02
@DarthVader relative to element most.If it is not possible,atleast to the page...or the one you think better. — Rama Rao M, Jun 12 '13 at 11:28
@TimDown It gives coordinates on text selection but not while typing in the editor. — Rama Rao M, Jun 13 '13 at 09:02
@RamaRaoM: It will give you coordinates whenever you like. You just need to hook it up to whatever events you need. — Tim Down, Jun 13 '13 at 09:59
@TimDown Hi Tim, Thanks.. It's working well. Can you please post it as an answer so that I can mark it as an accepted answer. — Rama Rao M, Jun 17 '13 at 13:07

score 2 · Answer 1 · answered Jan 04 '17 at 10:52

To get x,y of keyboard event:

$('#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});
     }
 });

score 1 · Answer 2 · answered Jun 12 '13 at 12:30

1

HERE-JSFIDDLE is the output for your CODE.

OR

JS CODE (just replace your js code with below code.)

$(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});
  });
});

answered Jun 12 '13 at 12:30

Sandy

663
1
4
9

The menu is opened at where the mouse cursor is,but not at the text cursor.But in my case, it should be opened at the text cursor.The user may press ctrl+space key while typing in the editor.So the menu should be opened there only. – Rama Rao M Jun 12 '13 at 13:28
Sure,Thank You.Looking forward for your reply. – Rama Rao M Jun 12 '13 at 13:48

score 0 · Answer 3 · edited May 23 '17 at 12:01

maybe caret() is what you are looking for (pageX & pageY won't work for div); the following link might help:

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

if you want to use document coordinates, you can use the following, but it will respond to keypress anywhere on the page, not just the textarea (if you use the div instead, e.pageX will be undefined)

$(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
     }
 });

score 0 · Answer 4 · answered Jun 17 '13 at 15:10

@Tim , It does not work if there is not text after the cursor position.May be inserting element at the cursor and finding out the same will work?i am using it in IE 8 and i found that x and y positions are zero.I have a content editable div with text as "one two" .Now if my cursor is any where between the text i get the values but if it is moved after two both are zero.Inserting element and then finding is also of no use.Any comments?

Get X,Y coordinates on keydown using JavaScript / jQuery

4 Answers4