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? — user2377420
– user2377420, Commented Jun 12, 2013 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
– Rama Rao M, Commented Jun 12, 2013 at 11:28
@TimDown It gives coordinates on text selection but not while typing in the editor. — Rama Rao M
– Rama Rao M, Commented Jun 13, 2013 at 9:02

Shaurya Taneja · Accepted Answer · 2017-01-04 10:52:31Z

2

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

answered Jan 4, 2017 at 10:52

Shaurya Taneja

212 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sandy · Accepted Answer · 2013-06-12 12:30:46Z

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, 2013 at 12:30

Sandy

6731 gold badge4 silver badges9 bronze badges

2 Comments

Rama Rao M Over a year ago

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 Over a year ago

Sure,Thank You.Looking forward for your reply.

Community · Accepted Answer · 2017-05-23 12:01:49Z

0

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

edited May 23, 2017 at 12:01

CommunityBot

11 silver badge

answered Jun 12, 2013 at 11:50

user2377420

Comments

Dushyanth · Accepted Answer · 2013-06-17 15:10:48Z

0

@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?

answered Jun 17, 2013 at 15:10

Dushyanth

1533 silver badges9 bronze badges

Collectives™ on Stack Overflow

Get X,Y coordinates on keydown using JavaScript / jQuery

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related