How can I make this code work in IE?

Question

Hi,

There are many tables in my HTML page. When a user hovers on a table, it should be automatically selected(onmouseover event) so that the user can copy(Ctrl+v) it to clipboard. I searched for a way in stackoverflow and ended up with the following code. But it only works in Firefox (window.getSelection() doesn't work in IE). How can I make it work in IE?

  var prevRange = null;

  function s(node) {
    var s = window.getSelection();
    var r = document.createRange();
    r.selectNode(node);
    if (prevRange) {
      s.removeRange(prevRange);
    }
    s.addRange(r)
    prevRange = r;
  }

For some unknown reason, I can't use s.removeAllRanges() in FF. It gives "invalid label" error. hmmm.

Also, is there a way to programmatically copy the selected code to clipboard?

Thanks.

Sam

Answer 1

It might be worth your while using a library like jQuery to help deal with browser quirks. It's simple enough to use if you know basic javascript.

http://jquery.com/

Answer 2

This is only to show which method to use when in IE and when using other browsers, it's not a complete solution by far and contains at least one logic trap.

var s;
if (window.getSelection) {
    s = window.getSelection();
}
else if (document.selection) {
    s = document.selection.createRange();
}

s should be a text range in IE, while it remains a selection-object in Mozilla-based browsers.

Information found here: http://www.quirksmode.org/dom/range%5Fintro.html

Edit: Edited for clarification. =)

Answer 3

This is a nice article explaining range differences between most common browsers and gives you useful tips to overcome them.

Answer 4

Regarding getSelection this has been answered by J. Steen,

var s;
if (window.getSelection) {
    s = window.getSelection();
}
else if (document.selection) {
    s = document.selection.createRange();
}

Regarding programmatically copy the selected text to clipboard, this is not working in Firefox due to security reasons. There are some workaround but the end user needs to change some settings. Java applets can be used to copy text in Firefox programmatically (java applets is not a nice solution however).

Answer 5

The following function will do what you want. No need for jQuery.

I've seen no problem with removeAllRanges in Firefox. You need to provide more code to illustrate the problem.

You won't be able to copy the user selection directly to the clipboard, as noted in another answer. Most browsers rightly don't allow it.

function selectElement(el) {
    var sel, range;

    // IE branch
    if (document.body.createTextRange) {
     range = document.body.createTextRange();
     range.moveToElementText(el);
     range.select();
    } 

    // DOM compliant browsers
    else if (window.getSelection && document.createRange) {
     sel = window.getSelection();
     range = document.createRange();
     range.selectNodeContents(el);
     sel.removeAllRanges();
     sel.addRange(range);
    }
}