recently I'm going to write some HTML5 introductory tutorials for you, and today we'll talk about what the Range object is in HTML5. The Range object represents a contiguous area of the page, and the Range object allows you to get or modify the contents of any area on the page. You can also copy and move elements of any area of the page by using the Range method.
in the JS document, there is a method to create a Range object with the following code:
var range = Document.createrange ();
in HTML5, each browser window will have a Selection object that represents the area selected by the user's mouse in the page (note: The browser under test IE9 does not support selection objects), and you can create selection objects with the following statement;
var selection = Document.getselection ();
or var selection = Window.getselection ();
each Selection object has one or more range objects, and each Range object represents a contiguous area within the range selected by the user's mouse, and in Firefox, multiple contiguous regions can be selected with the CTRL key. So in Firefox, a Selection object has multiple Range objects, and in other browsers, the user can only select a contiguous range, so there is only one Range object.
you can get a Range object for a Selection object by using the Getrangeat method of the Selection object, as follows:
The Getrangeat method has a parameter index, which represents the serial number of the Range object, and we can determine whether the user has selected the content by the value of the Rangecount parameter of the Selection object .
1. When the user does not press the mouse, the value of this parameter is 0.
2. When the user presses the mouse, the parameter value is 1.
3. When a user selects one or more regions while holding down the CTRL key while using the mouse, the parameter value represents the number of user-selected areas.
4. When the user cancels the selection of the area, the value of this property is 1, which means that there is an empty Range object on the page;
The test code is as follows:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>meter</title>
<script>
function Rangetest () {
var html,
Showrangediv = document.getElementById ("Showrange"),
selection = Document.getselection ();
if (Selection.rangecount > 0) {
HTML = "You have selected" + Selection.rangecount + "segment content <br/>";
For (var i = 0; i < Selection.rangecount; i++) {
var range = selection.getrangeat (i);
html + = "+" + (i + 1) + "Paragraph content is:" + range + "<br/>";
}
showrangediv.innerhtml = html;
}
}
</script>
examples of usages of
<input type= "button" value= "click Me" onclick= "rangetest ()"/>
<div id= "Showrange" ></div></body>
Effect:
Original from: Pinterest/U_life
The concept of range in HTML5
