Find Line Above or Below in Javascript

Question

I am working on an in-place HTML editor, concentrating on Firefox only right now. I have an element inserted where the cursor should be and also have left and right arrows working, but I can't seem to find a way to find:

1. Start and end of a line for the home and end keys
2. The next line up or down for the up/down arrows.

I see document.elementFromPoint, but this doesn't get me a Range object. The Range object itself seems rather useless when it comes to using pixel positions.

Answer 1

I'm not sure what you mean by 'start and end of a line'. Are you referring to a line of text on the page, regardless of its containing element? Can you provide a link to your app or an illustrative example page?

IE and Firefox both provide an element.getClientRects() method. However, it only works under certain circumstances and doesn't behave the same from browser to browser. See quirksmode for details.

This method will probably not be helpful in many situations. In the case that you have a P element containing bare text, Firefox returns a collection containing a single element representing the P element. It doesn't tell you anything about the lines of text it contains.

Most of the in-place editors that I've seen work by clicking on an element to edit it. The element is then replaced by a textbox/area and associated save/cancel buttons.

Answer 2

If you need a to create a range for the element under specific pixel position, you can combine document.elementFromPoint() and document.createRange() and Range.selectNodeContents();

The snippet below would highlight the content of an element at (100,200)

var elem = document.elementFromPoint(100,200);
var r = document.createRange();
var s = window.getSelection()
r.selectNodeContents(elem);
s.removeAllRanges();
s.addRange(r);

I hope this will help you find the final solution.