javascript - Can I find the cursor's pixel position in a ContentEditable? - Stack Overflow

admin管理员组

文章数量:1303343

I mean finding the top/left pixel position of the cursor, rather than the character offset.

The reason I want to do this is because I want to show a small tooltip-like div next to the cursor (think of the newer MS Word's floating formatting box) that follows the cursor as you type or click. I can use the mouse coordinates if the user clicks, but not sure how to do this for typing.

Is there a reliable way? If not for finding the top/left position of the cursor, then the alternative is to just find the top position for the line.

Sample code isn't 100% necessary, as long as the method works and is well-explained.

I mean finding the top/left pixel position of the cursor, rather than the character offset.

The reason I want to do this is because I want to show a small tooltip-like div next to the cursor (think of the newer MS Word's floating formatting box) that follows the cursor as you type or click. I can use the mouse coordinates if the user clicks, but not sure how to do this for typing.

Is there a reliable way? If not for finding the top/left position of the cursor, then the alternative is to just find the top position for the line.

Sample code isn't 100% necessary, as long as the method works and is well-explained.

• javascript
• jquery
• position
• contenteditable

Share Improve this question Follow asked Jan 24, 2011 at 13:13 David TangDavid Tang 93.7k3232 gold badges168168 silver badges149149 bronze badges 2

• When you say cursor do you mean mouse cursor or input location (which might be in the middle of the word for instance). If you mean the mouse then you can just bind to the mouseover event and grab the mouse position then. – Blair McMillan Commented Jan 24, 2011 at 13:29
• @Blair I mean the input location, and yes it might be in the middle of a word. – David Tang Commented Jan 24, 2011 at 13:33

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

try this

var cursorY = window.getSelection().getRangeAt(0).getBoundingClientRect().top;

cursorY is the cursor Y position in window.

A Selection object represents the range of text selected by the user or the current position of the caret.

Selection.getRangeAt() return a range object representing one of the ranges currently selected.

This not really an answer but concepts to think about:

In contenteditable, everything consists of nodes just like anything else HTML, so you can get the node's position, the problem is where in the node you are (if it's text, you might be 100 characters inside the node). So you have to make your own single character nodes.

To get the position as someone types, you'd have to capture the onkeypress event, stop the propagation bubble, take the character they are asking for, stuff it in a node (maybe a span ala a "marker") and then insert that node. Then you'd calculate the exact position of that span/node by it's offsets.

You'll probably have to remove the span and replace it with just the character afterwards.

There is also the problem I've encountered where if you mess with the bubble events when scrolling is supposed to happen, the caret may go outside the viewport.

Optionally, and this might be a slightly better idea, instead of messing with the propagation, allow the browser to insert the character on it's own, then immediately insert a zero-width unicode character (invisible) in a span/node before or afterwards, and calculate it's position instead. Then yank out the markers either on the fly or when they pause typing.

Yup, it's that messy, sorry. If someone has a better way, I am all ears.

本文标签： javascriptCan I find the cursor39s pixel position in a ContentEditableStack Overflow