This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
IE OnlyThis property is IE specific. Although it is well supported by IE, most other browsers no longer support this property. This property should only be used as one of the solutions when you need to be compatible with lower versions of IE, rather than relying on it completely in cross browser scripts.
TextRange object represents a fragment of text in a document, similar to the standard defined
This object is used to represent a specific piece of text in the document. For example, when you hold down the mouse to select the content on the page, you create a typical
TextRange. It is implemented in IE, then a
TextRange object can be created by
Returns the height of the rectangle bound to the
- Returns the distance between the left edge of the rectangle that binds the
TextRangeobject and the left edge that completely contains the
- Returns the distance between the top edge of the rectangle that binds the
TextRangeobject and the top edge that completely contains the
Returns the width of the rectangle bound to the
- Gets or sets the HTML content within the
- Gets or sets the plaintext content within the
- Move the caret to the beginning or end of the current range.
Returns a copy of
- Executes a command on the current document, the current selection, or the given scope.
- Expand the range to include the full range of specified units. For example, expanding a
"word"means that the words at both ends of the range will completely included in the range.
xpand to wormay become
expand to words, etc.
- Searches the specified text in the original range and adjusts the range to include the first match.
- Returns whether the current range contains the specified range.
- Returns whether the current range is equal to the specified range.
- Collapses the range and moves the blank range by a specified number of units. Such as,
move("character",-1)means to move one character to the left.
- Moves the end of the range by a specified number of units.
- Moves the start of the range by a specified number of units.
- Causes the range to contain the text of the specified element. Can only be used on
- Returns the parent element of the range, which is the smallest element that contains the range completely. If the selection contains more than one element, when you modify the contents of the selection, the contents will be placed in the corresponding position of the parent element instead of the child element.
- Paste the HTML content into the given range and replace any previous text and HTML elements in the range.
- Returns a
Booleanindicating whether the specified command can be executed successfully with the
execCommandmethod in the current state of the given document. You can also see
- Returns the
Booleanindicating the current state of the specified command. You can also see
- Returns the
DOMStringindicating the current value of the specified command. You can also see
- Scroll the range to the visible range (top or bottom). It can be used as an alternative to
Element.scrollIntoViewin the lower version of IE.
- Select the current range (i.e. the blue selection seen by the user).
- Sets the end point of the current range based on the bounds of other
The following example is valid under IE9. The example gets the
document.selection, and sets the specified element to be selected. IE9 supports the standard alternative
var range = document.selection.createRange(); var element = document.getElementById("test"); range.moveToElementText(element); range.select(); // Selected "SomeTextToBeSelected"
<!DOCTYPE html> <html> <head> <title>TextRange Example</title> </head> <body> <p id="test">SomeTextToBeSelected
</p> </body> </html>
Use TextRange to Operate the Selection
Valid only under IE9. The
selection interface should be used first, if the browser allows it.
document.selection property returns a non-standard
selection object, and the
selection.createRange() method creates a
TextRange object consistent with the currently selection.
var sel = document.selection; var range = sel.createRange(); alert(range.text); // Output plaintext of the selection
Note that the
createRange method does not create a reference. If you want to select the modified range after modifying the selection, you need to call the
document.selection object is the primary purpose of
TextRange. This object is used to process the selected ranges in the document, and is mainly implemented by using the
TextRange interface. According to the standard, a window / document may have multiple non adjacent selection, but only Firefox can select multiple ranges through Ctrl; generally, only one selected
TextRange is allowed in ie.
However, in other browsers,
document does not have a so-called
selection attribute - they operate on the selection through the standard Selection API, that is, they get the
Selection object through the
window.getselection() method, and use the standard
Range object to process the text fragment. IE9 and later also gave up the
document.selection object and switched to the standard interface (although
TextRange has been reserved, it has lost its function in most cases).
It's easy to get confused. Generally, if the script only needs to be compatible with the latest browser, the standard interface is the best choice; however, the current website still wants to be compatible with IE8 or below browsers. Therefore, the best way is to deal with both at the same time, that is, try to use
TextRange mode when the standard interface is not supported, but do not regard it as the only choice.
||≤8(Standard API after IE9)||No Support（See Selection API）|