admin管理员组文章数量:1355522
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?
本文标签： contenteditableGet XY coordinates on keydown using JavaScriptjQueryStack Overflow
版权声明：本文标题：contenteditable - Get X,Y coordinates on keydown using JavaScriptjQuery - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743944494a2566155.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论