Home > Developer > JavaScript
I just discussed a very interesting question with my colleagues. There is an idea that needs to record the user's content selected on the page. Under ff and ie9, there is a w3c dom2 event createRange, which is no longer cumbersome here. The main problem is that in IE6, 7, and 8, you can only select a hot zone through createTextRange. If we know that the user selects the Start Element and offset, as well as the end element and offset, we can use the following example to mark the user's content with js.
Copy codeThe Code is as follows:
<Head>
<Script>
Function mark (){
Var B = document. getElementById ("B ");
Var b1 = document. getElementById ("b1 ");
Var b2 = document. getElementById ("b2 ");
Var a1 = document. body. createTextRange ();
A1.moveToElementText (B );
A1.moveStart ('character ', 17 );
Var a2 = document. body. createTextRange ();
A2.moveToElementText (b1 );
A2.moveEnd ('character ',-2 );
A1.setEndPoint ("EndToEnd", a2 );
A1.select ();
} </Script>
</Head>
<Body>
<Div id = "B"> The <B> contents </B> of the <I> source </I> element. </div>
<Div id = "b1"> The <B> contents </B> of the <I> source </I> element. </div>
<Div id = "b2"> The <B> contents </B> of the <I> source </I> element. </div>
<Button onclick = "mark ();"> Mark </button>
</Body>
OK. From the code above, we can know that in IE6, 7, 8, we need to create two textRange, one is the Start node, and the offset when multiple elements need to be associated, there is also an end node and offset. Two textRange nodes are associated with a1.setEndPoint.
Reference: http://help.dottoro.com/ljgbbkjf.php
Http://msdn.microsoft.com/en-us/library/ms535872%28VS.85%29.aspx
If we know the start and end position, how do we know the start, end node, and offset of the selected hot zone?
Unfortunately, after half a day, only the following attributes can be used in MSDN,
TextRange. parentElement: return the Father's Day in the selected hot zone. This helps us determine an approximate range.
BoundingLeft, offsetLeft, you can know the left offset distance of the hot zone
BoundingTop, offsetTop, you can know the upper offset distance of the hot zone
Text, the selected text content, html content selected by htmlText
There can be no direct index ..., And Start Node... And so on.
Well, if we want to calculate the position, we can use line-height of each line to calculate the height. If it is a node, We need to calculate the height, padding, marging,
To calculate the left offset, We need to calculate the font-size, margin, padding, and letter-space. In this way, we can obtain the approximate position through css calculation,
Then we can use text to compare the text content of nearby elements with htmlText to obtain the index coordinates.
In this way, we can determine the start/end nodes and the offset,
However, the cost for doing so is relatively high. I don't know if there is any good solution, or the hacker method is too _ ^.
========================================================== ========================================================== =
I read the htmlText method again just now. I was surprised to find that the above example is still used. The following is returned for htmlText:
<DIV id = src> he <I> source </I> element. </DIV>
You can see the tagName of the Start Node and the selected content. You can remove the html tag at the beginning and end, and then use the regular expression to determine whether the html code is in the previous parent. the position of innerHTML, so that the offset is obtained. OK. You do not need to determine the offset, so we can get the start, end node, and offset.
In this way, the start and end nodes of any selected content can be recorded in IE6, and the offset is ^_^.
========================================================== ==================================
In this case, the only drawback is that for a single character or duplicate word, you still have to use the offsetLeft attribute of css to determine the distance, are you sure you are the one you selected? I don't know if you have any suggestions.
========================================================== ======================================
Then, this morning, Ling Guang came into being, sending an odd thought to each other, solving the problem that the offsetTop and left operators are not required to determine the offset of repeated characters in a single node.
The Code is as follows:
Copy codeThe Code is as follows:
<Head>
<Script>
Function mark (){
Var selection = document. selection. createRange ();
If (selection. text. length = 0 ){
Return;
}
Var textLength = event. srcElement. innerText. length;
Var oldSelectionParent = selection. parentElement ();
Do {
Selection. moveEnd ("character", 1 );
} While (selection. parentElement () = oldSelectionParent );
Selection. moveEnd ("character",-1 );
Alert (textLength-selection. text. length );
}
Function load (){
Document. body. onmouseup = mark;
// Document. body. onmousedown = mark;
}
</Script>
</Head>
<Body onload = "load ()">
<Div> fly a fly Fly a fly a </div>
</Body>
The principle is to use the method of calculating the offset from one character to the bottom or top of a node, because for the Heat Zone in a single element, its parentElement () the returned parentNode is his own. If the returned parentNode is his own parent node, you can use this change to determine whether to move to the end of the node text. Then, the offset can be calculated.
OK. In summary, the htmlText attribute can be used to locate the selected hot zone of multiple nodes. For repeated characters in a single node, you can use the last part of the code in this article. In this way, in IE, record the selected position of the cursor, and the recurrence method is perfect ^_^
========================================================== ====
I went to the kissy group and asked if Cheng Yu had done a fully compatible location fetch code. The link is as follows:
Http://www.jb51.net/article/28120.htm
Code: http://lite-ext.googlecode.com/svn/trunk/lite-ext/playground/range/ie.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
