Problems and common solutions of Range in various browsers

The first time I heard about the concept of Range was at the technical exchange meeting of the spatial editor. At that time, the author told us that the most important concept in the editor was Range. By operating range, all operations of the editor can be implemented. In the end, what is range? In fact, the simple point is the selection area. You may have a concept of Rectangle. In fact, range can be understood as a rectangle. If we select a text, this text occupies space, so range has the starting and ending positions. 1. There are currently three similar objects about range in browser compatibility: W3C range object, Mozzlia selection, and ie TextRange, please refer to the official website http://www.quirksmode.org/dom/w3c_range.html here in the face of these three is said very clearly, we can see that Mozilla range is a selection object, in ie, range is a text Range, which is completely different from Mozilla. Therefore, you need to write different compatible scripts for these two types of ranges. Currently, mainstream browsers Mozilla, chrome safari and opera Support selection objects, but opera also supports text Range in IE, but not comprehensive. So the code should be var selection like this; // declare the range object if (window. getSelection) {// mainstream browsers, including mozilla, chrome, and safari selection = window. getSelection ();} else if (document. selection) {selection = document. selection. createRange (); // processing in IE browser. if you want to obtain the content, you need to add the text attribute to the selection object} to determine the browser compatibility. We can also determine if (Obj. createTextRange) {// operation in IE browser} else if (Obj. setSelectionRange) {// some operations in non-IE} I tracked and downloaded these objects in chrome and IE. Let's take a look at these objects in ie. If you create If the range object is used, range exists. moveEnd () range. moveStart () range. select (); you can operate the selected text in other browsers, you can use obj. setSelectionRange () to implement the selected operation. The specific format is as follows: o. setSelectionRange (start, end); o: For the text input box object start: For the start position of the string end: For the end position of the string at the point of the mouse, to insert the text, in ie, you can use document. selection. createRange (). text = value; where document. selection. createRange () indicates the TextRange object at the current mouse position, textRange. text = value indicates that the insert value at the current mouse can be used in other browsers through obj. value = str + value + str In the form of 1, for the input obj such as text box in non-ie, there is the selectionStart and selectionEnd attribute, indicating the current cursor position. Conclusion: 1) it is mentioned that the range object is not created in the same browser to obtain the text content and compatibility. 2) How to Use the range object to insert text in the text box? 3) how to Use the range object to select text and move the cursor by yupeng