Selection criteria JavaScript operation

Brief introduction

selection is currently active selected area (ie, highlighted text) to operate.

Can be used in non-IE browser (Firefox, Safari, Chrome, Opera ) window.getSelection () to obtain the object selection, article describes the method of operation is the standard selection. Most of the text content from https://developer.mozilla.org/en/DOM/Selection

the term

The following are a few terms in the English document a few terms.

anchor: Select the "starting point" area.
focus: Select the "end point" area.
range: It is a fragment (HTML fragment), which contains some of the nodes or text nodes. Under normal circumstances, the same time may have only pages in a range, there may be multiple range (using Ctrl to select more than health, but some browsers do not allow, for example, Chrome). Range selection can be obtained from the subject, may be used document.createRange () method is obtained.

Attributes

anchorNode: Return node contains the "starting point".
anchorOffset: "Starting point" of the offset in anchorNode.
focusNode: Returns the node that contains the "end point".
focusOffset: "End point" of focusNode offset.
isCollapsed: "Starting point" and "end point" are coincident.
Rngecount: Returns the number range contained in the object selection, there is generally a range, with the use of the Ctrl can have multiple health.

method

getRangeAt (index)

You get a range object from the current selection object.
index: Reference rangeCount properties.
Returns: Returns the object based on the corresponding range subscript index.

collapse(parentNode, offset)

The start and end points merge to a specific node (the parentNode) corresponding to (offset) position.
parentNode: Focus (caret) will be in this node.
offset: should be in the range [0, 1, 2, 3 , parentNode.childNodes.length].

0: before positioning the first child node.
1: before the second child node.
……
childNodes.length-1: the last child of the current node.
childNodes.length: after the last child.

Mozilla official document of the mentioned values of 0 and 1, the test is not accurate. There is also a document is not very clear "The document is not modified. If the content is focused and editable, the caret will blink there."

extend(parentNode, offset)

The "end point" to the specified node (the parentNode) specified position (offset).
"Starting point" does not move, the new selection from the "starting point" to the region "end point", regardless of the direction (the new "end point" may be in front of the original "starting point").
parentNode: the focus will be within this node.
Offset: 1, parentNode last; 0, parentNode foremost.

modify(alter, direction, granularity)

Change the focus position, or extended | narrow the selection of the size of the
alter: changes in the way. "Move", for moving the focus; "extend", for changing the selection.
direction: the direction of movement. Optional value forward | backword or left | right
granularity: mobile units or size. Optional value, Character "," Word "," sentence "," Line "," paragraph "," lineboundary "," sentenceboundary "," paragraphboundary ", or" documentboundary. "
Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1 will support this function, the official document: https://developer.mozilla.org/en/DOM/Selection/modify

collapseToStart()

The "end point" to move, selction of "starting point", when more range as well.

collapseToEnd()

The "starting point" to move, selction of "end point", when more range as well.

selectAllChildren(parentNode)

The parentNode all descendants of the node (except parentNode) into a selection, a page in the original selection will be discarded.

addRange(range)

Add the selection range to them, so that a selection can be multiple range.
Note that Chrome does not allow simultaneous presence of multiple range, it's a little different approach and Firefox.

removeRange(range)

Remove objects from the current range selection, the return value is undefined.
Chrome is currently no change function, even in Firefox if you have created (document.createRange ()) as a parameter of the range will be an error.
If () to take a oSelction.getRangeAt, it is not given.

removeAllRanges()

Remove all objects selection in the range, after performing anchorNode, focusNode is set to null, the contents of any selected does not exist.

toString()

Returns the selection of plain text, do not include the label.

containsNode(aNode, aPartlyContained)

Determining whether a node is part of selction.
aNode: To verify the nodes.
aPartlyContained: true, as long as there is a part of belonging to the selection aNode returns true; false, aNode must all belong to return true if selection.

document.activeElement

This property is part of HTML5, it returns the element currently has the focus, if there is no "body" is returned. Under normal circumstances return "Text field" or "text box." It is also possible to return "drop-down list", "button", "radio" or "radio button" and so on, Mac OS systems may not return non-input elements (textbox, such as text boxes, text fields).

Properties and methods:

selectionStart: Starting position of the input selection elements can be read.
selectionEnd: Enter the position of the end point selection elements, can be read.
setSelectionRange(start, end): And input elements disposed selectionStart value selectionEnd

If textbox no selection, selectionStart selectionEnd equal and are the focus position.
When using setSelectionRange ()
if the end is less than the start, and speaks selectionStart selectionEnd are set to end;
if the start and end parameters textbox content greater than the length (textbox.value.length), start and end are set to the length of the value attribute.
It is worth mentioning that selectionStart and selectionEnd will record relevant attributes of the last element selection, meaning that when the element loses focus, and the use of selectionStart selectionEnd still be able to get to the value of the element loses focus. Very useful (the expression is inserted into the last position of the focus element) when this feature might be made "insert expression."

<textarea id="textbox">abc中国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中国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 of: ie6 \ 7 \ 8 are not supported; Chrome, Firefox, Opera, Safari are supported.

Reference documents: https://developer.mozilla.org/en/DOM/document.activeElement

document.designMode = 'on';

Method When document.designMode = 'on' time of the selection, selectionStart, selectionEnd and can not be used in Opera, Firefox, Safari, and Chrome but may.

Reproduced in: https: //www.cnblogs.com/rainman/archive/2011/02/27/1966482.html