JavaScript Standard selection operation

• Brief introduction
• Terms
• Property
• Method
• Document.activeelement
• Document.designmode = ' on ';

Brief introduction

Selection is the current active selection (that is, the highlighted text).

Selection objects can be obtained using window.getselection () in non-IE browsers (Firefox, Safari, Chrome, Opera), this article describes the standard selection methods of operation. Most of the content comes from https://developer.mozilla.org/en/DOM/Selection

Terms

The following nouns are several nouns in English documents.

Anchor

Select the start point for the area.

Focus

Select the end point of the area.

Range

is a fragment (HTML fragment) that contains a node or part of a text node. In general, there can be only one range in the same time page, or multiple ranges (multiple selections using CTRL +, but some browsers do not, such as Chrome). You can get the Range object from selection, or you can use the Document.createrange () method.

Property

Anchornode

returns the node that contains the start point.

Anchoroffset

The

offset of the start point in the Anchornode.

Focusnode

returns the node that contains the end point.

Focusoffset

The

offset of the end point in the Focusnode.

IsCollapsed

whether "start" and "End point" are coincident.

Rangecount

returns the number of Range objects contained in the selection, and there can be more than one Range,ctrl-fit use.

Method

Getrangeat (Index)

Gets a Range object from the current Selection object.
Index: Refer to the Rangecount property.
return: Returns the corresponding Range object according to the subscript index.

Collapse (parentnode, offset)

Merges the start point and end point to the corresponding (offset) position of the specified node (parentnode).
ParentNode: The focus (caret) will be within this node.
Offset: The value range should be [0, 1, 2, 3, ParentNode.childNodes.length].

• 0: Before the first child node is positioned.
• 1: Front of the second child node.
• ......
• Childnodes.length-1: Before the last child node.
• Childnodes.length: After the last child node.

The Mozilla official documentation mentions values of 0 and 1, which are not accurately tested. The document is also not very clear "the document is not modified." If the content is focused and editable, the caret would blink there. "

Extend (parentnode, offset)

Moves the end point to the specified position (offset) of the specified node (parentnode).
The start point does not move, and the new selection is the area from the start point to the end point, regardless of the orientation (the new end point can precede the original start).
ParentNode: The focus will be within this node.
The last of the Offset:1,parentnode; the 0,parentnode of the first.

Modify (alter, direction, granularity)

Change the focus position, or expand | Reduce the size of the selection
Alter: Change the way. "Move", used to move the focus; "extend", used to change the selection.
Direction: The direction of movement. Selectable Values Forward | Backword or left | Right
Granularity: Moving units or dimensions. Optional values, character "," word "," sentence "," line "," paragraph "," Lineboundary "," Sentenceboundary "," paragraphboundary ", or" Documentboundary ".
Firefox 4/thunderbird 3.3/seamonkey 2.1 does not support this function, Official document: Https://developer.mozilla.org/en/DOM/Selection/modify

Collapsetostart ()

This is also true when you move the end point to a selction "start point", with multiple range.

Collapsetoend ()

This is true when you move the start point to the selction end point, which is the multiple range.

Selectallchildren (parentnode)

all descendant nodes of ParentNode (except ParentNode) are changed to selection, and the original selection in the page will be discarded.

AddRange (Range)

add range to selection, so you can have more than one range in a selection.
Note that Chrome does not allow multiple ranges to be available at the same time, and it is handled differently from Firefox.

RemoveRange (Range)

Removes the Range object from the current selection and returns a value of undefined.
Chrome does not change the function at this time, even if it is in Firefox if you create (Document.createrange ()) range as a parameter.
If the Oselction.getrangeat () is taken, no error will be made.

Removeallranges ()

removes all Range objects in the selection, Anchornode, Focusnode are set to null after execution, and no selected content exists.

ToString ()

returns the plain text of the selection, without the label.

Containsnode (anode, apartlycontained)

Determines whether a node is part of a selction.
Anode: the node to validate.
Apartlycontained:true, Anode returns true only if a portion of the selection returns True;false,anode must all belong to selection.

Document.activeelement

This property is part of HTML5, which returns the currently focused element and returns "Body" if it does not exist. In general, the Text field or text box is returned. It is also possible to return a drop-down list, button, radio, or multi-select button, and so on, and the Mac OS system may not return non-input elements (textbox, such as text boxes, text fields).

Related Properties and methods:

SelectionStart

Selectionend

Setselectionrange (start, end)

set the input element SelectionStart and Selectionend values

• If the textbox is not selection, SelectionStart and selectionend are equal and are the focal positions.
• Setselectionrange
  

<textarea id= "textbox" >abc China efg</textarea> <script type= "Text/javascript" > window.onload =     function () {var textbox = document.getElementById (' textbox ');     Textbox.setselectionrange (5, 2);    Console.log (Textbox.selectionstart);      2 Console.log (textbox.selectionend); 2}; </script> 

<textarea id= "textbox" >abc China efg</textarea> <script type= "Text/javascript" > window.onload = function () {     var textbox = document.getElementById (' textbox ');     Textbox.setselectionrange (9, 9);     Console.log (Textbox.selectionstart);    8     Console.log (textbox.selectionend);      8}; </script>

Support: Ie6\7\8 not supported; Chrome, Firefox, Opera, Safari are all supported.

Reference Document: Https://developer.mozilla.org/en/DOM/document.activeElement

Document.designmode = ' on ';

When document.designmode = ' on ' selection methods, SelectionStart, Selectionend are not available in Firefox and opera, but Chrome and Safari are available.

JavaScript Standard selection operation