Cross-Browser Selection Handling - Cliboard createRange Ŭ¸³º¸µå º¹»ç
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:
If you have access to both browsers, you probably noticed that Internet Explorer 4.0x, as opposed to Navigator 4.0x, is not affected by the layout of the page. For example, it does not insert spaces when the text is indented with a blockquote. Since this entire page is indented, we'll use regular expressions to get rid of the excess spaces, as explained at the beginning of the column. Here's the complete code:
<FORM NAME="myForm">
<TEXTAREA NAME="myArea" COLS="40" ROWS="4"></TEXTAREA>
</FORM>
<SCRIPT LANGUAGE="JavaScript">
<!--
function display() {
if (document.getSelection) {
var str = document.getSelection();
if (window.RegExp) {
var regstr = unescape("%20%20%20%20%20");
var regexp = new RegExp(regstr, "g");
str = str.replace(regexp, "");
}
} 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>
Another point to notice is that Internet Explorer 4.0x does not insert a line feed or a carriage return where the text on the page wrapped to a new line.