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=".7.1.js"></script>
<script type="text/javascript" src=".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>
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./jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis./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 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 Commented Jun 12, 2013 at 11:28
- 2 stackoverflow./a/16304786/96100 – Tim Down Commented Jun 12, 2013 at 14:14
- @TimDown It gives coordinates on text selection but not while typing in the editor. – Rama Rao M Commented Jun 13, 2013 at 9:02
- 1 For example: jsfiddle/aSUSh/116 – Tim Down Commented Jun 13, 2013 at 10:01
4 Answers
Reset to default 2To 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});
}
});
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});
});
});
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
}
});
@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 ments?