JavaScript Selections: Cross-Browser Selection Handling - Doc JavaScript

Cross-Browser Selection Handling

Now that you know how to handle selections in Navigator 4.0x (with the getSelection() method) and Internet Explorer 4.0x (with the TextRange object), its time to discuss cross-brower implementations. Generally speaking, Navigator 4.0x supports the document.getSelection() method, while Internet Explorer 4.0x supports the document.selection object. So a basic object detection routine would look like this:

if (document.getSelection) {
  // the Navigator 4.0x code
} else if (document.selection) {
  // the Internet Explorer 4.0x code
} else {
  // the alternative code
}

In order to retrieve the current selection (which is the only thing you can do with Navigator 4.0x) you need to create a TextRange object (Internet Explorer 4.0x). But not all versions of Internet Explorer 4.0x support the TextRange object. For example, the Mac version of Internet Explorer 4.0x doesn't support text ranges, although it does support the document.selection object. Therefore, we'll use a short-circuit AND operator to check if the document.selection.createRange() method is supported. The AND operator is essential, because it ensures that the browser won't evaluate the document.selection.createRange reference if its parent object (document.selection) doesn't exist. So a script that retrieves the current selection should have the following structure:

if (document.getSelection) {
  // the Navigator 4.0x code
} else if (document.selection && document.selection.createRange) {
  // the Internet Explorer 4.0x code
} else {
  // the alternative code
}

The following example displays the current selection in a box:

<FORM NAME="myForm">
<TEXTAREA NAME="myArea" COLS="40" ROWS="4"></TEXTAREA>
</FORM>
<SCRIPT LANGUAGE="JavaScript">
<!--
function display() {
  if (document.getSelection) {
    var str = document.getSelection();
  } else if (document.selection && document.selection.createRange) {
    var range = document.selection.createRange();
    var str = range.text;
  } else {
    var str = "Sorry, this is not possible with your browser.";
  }
  document.myForm.myArea.value = str;
}
if (window.Event)
  document.captureEvents(Event.MOUSEUP);
document.onmouseup = display;
// -->
</SCRIPT>

We explained the purpose of this script earlier in the column. The only difference is that this is a cross-brower version, which works on Win32 versions of Internet Explorer 4.0x as well as all versions of Navigator 4.0x. Simply select a portion of this document, and it'll appear in the following box: