3

I get the cursor position at time a. Then I get the cursor position at time b. I want to make a range from the cursor position at time a to the cursor position at time b. Time a and b are start and end of ctr-v (paste).

I get the cursor position like so - or rather a range at the cursor position.

sel = window.getSelection();
range_time_a = sel.getRangeAt(0).collapse(true);

But, how do I use range_time_a and range_time_b to create a new range that starts at range_time_a and ends at range_time_b?

I have seen code to get the element with the cursor and to get the offset within that element. I could use that for setStart() and setEnd, but it seems like there should be an easier way since I've already got two ranges.

user984003
  • 23,717
  • 51
  • 158
  • 250
  • This doesn't return a cursor position - it returns a selection object https://developer.mozilla.org/en-US/docs/Web/API/Selection?redirectlocale=en-US&redirectslug=DOM%2FSelection ... What is it exactly that you're trying to achieve? – 1nfiniti May 19 '13 at 17:28
  • Ok, not a cursor position, but a range at the cursor position. I am trying to get a range containing the pasted content. I figure this must be the stuff between the cursor when ctr-v was pressed and when it was released. I can get the pasted text from the clipboard, but I need the html. – user984003 May 19 '13 at 17:34
  • 1
    @user984003 One idea would be to insert a dummy element on mousedown and another one at mouseup, then use their locations to create the range. – Asad Saeeduddin May 19 '13 at 17:36
  • Hey, that's a pretty cool idea! – user984003 May 19 '13 at 17:37
  • The only issue with the node insertion technique is that selections can span multiple levels of nested elements in weird ways, so I'm not sure it would work. Pretty much the same reason that the getSelection object doesn't have a simple way of supporting this task either. – 1nfiniti May 19 '13 at 18:33
  • I am also having a hard time adding a dummy element and then placing the cursor after it. Seems that Chrome, at least, only allows this for block elements and textNodes. Even with range.setStartAfter(), it places the cursor before the dummy element. – user984003 May 20 '13 at 04:50

1 Answers1

1

EDIT This actually won't give you what you're looking for... This is really complicated. My initial suggestion of commonAnscestorContainer.innerHTML will give you too much back (all the HTML of the closest parent container to your selection).

First, you're probably going to want to trigger this code on an eventHandler that fires when the user presses ctrl+c (discussion here: How to detect Ctrl+V, Ctrl+C using JavaScript?).

If you only want to get the text selected, that's easily done:

range = window.getSelection().toString();

You don't need to check the selection at various times - you only need to capture it at the point the user hits ctrl-c.

getSelection is not meant for capturing the HTML of a selection. You can capture text & remove text, move to the start/end of the selection and a bunch of other things described here, but you can't grab HTML.

Big part of the problem is that this isn't part of any stanfard spec (see this link). Another reason its not consistent across browsers, or supported in IE7/8.

Some non-standards based examples of how to get more info out of range selections can be found here if you really need to do this - Get a range's start and end offset's relative to its parent container

Community
  • 1
  • 1
1nfiniti
  • 1,949
  • 13
  • 18
  • AFAIK There are some issues with window.getSelection (it doesn't work in ie<9), and getRangeAt (multiple ranges are supported / can be selected in firefox, but not in other browsers). – 1nfiniti May 19 '13 at 18:17