Home > Developer > JavaScript

Ie6,ie7,ie8 use JavaScript to record cursor selection (fully completed) _javascript tips

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞
I just discussed a very interesting question with my colleagues, and there is an idea that needs to record the content that the user has selected on the page, there is a dom2 level event createrange in FF and IE9, there is no longer a burden. The main problem is that the ie6,7,8 can only be selected through the createTextRange hot zone. If we know the user chooses the start element and the offset, as well as the end element and the offset, then we can use the following example to mark the user's selection with JS
Copy Code code as follows:

<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>
<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 above code, we can know that under ie6,7,8, when we need to correlate multiple elements, we need to create two TextRange, one is the start node, and the offset, there is an end node, and the offset, Two TextRange associated with A1.setendpoint

Reference Document: http://help.dottoro.com/ljgbbkjf.php

Http://msdn.microsoft.com/en-us/library/ms535872%28VS.85%29.aspx

Above is where we know where to start, how do we know the start of the hot zone that the user has selected, the end node and the offset?

Unfortunately for a long time, MSDN has only the following attributes to take advantage of,

Textrange.parentelement return to the selected hot zone of the Father node, can help us to determine, a probable 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, selected textual content, HTMLText selected HTML content

can have no direct index ..., and start node ... Like

Well, if we're going to calculate by position, we can compute the altitude by the line-height of each row, and if it's a node, compute the node's height,padding,marging,

To calculate the left offset, calculate the font-size,margin,padding,letter-space, so that we can get the approximate position by using the CSS calculation,

Then we combine text, and htmltext to compare the textual content of the adjacent elements to get the coordinates of the index

So basically we can determine the start/End node, and the offset,

However, the cost is also relatively high, do not know whether there is a good way, or hacker method ^_^

==================================================================================

Just looked at the next HTMLText method, there is a surprise discovery, or the above example, HTMLText returned as follows

<div id=src>he <I>source</I> element.</div>
<div id=src1>the <B>contents</B> of the <I>source</I> element</div>

You can see the tagname of the start node and the selected content, by removing the HTML tag at the end of the beginning, Then use the regular judgment to get this HTML code in the previous parent.innerhtml position, so the offset is taken, OK, do not need to judge the way of offset, we can take the start, end node, and offset

This allows you to record the start, end node, and offset of any user-selected content under ie6,7,8 ^_^

=============================================================

Just do this, there is also a unique drawback is that for a single character, or repeated occurrences of the word, or through the CSS offsetleft such attributes, by judging the distance, but also determine whether the selected, do not know if we have no good suggestions

===============================================================

And then this morning, a moment of inspiration, a whim, a solution that does not need to be judged by offsettop,left. The offset of repeated characters within a single node

The code is as follows

Copy Code code as follows:

<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>
<body onload= "Load ()" >
<div> fly A A a fly fly a fly a A a a a </div>
</body>

The principle is to use the method of calculating the offset at the bottom or top of a node by constantly shifting 1 characters, because for the hot zone within a single element, his parentelement () return is himself, if it spans multiple nodes, The returned ParentNode is his own parent node, which can be used to determine whether or not to move to the end of the node text. ^_^ so we can calculate the offset.




OK, summary, through the HTMLText attribute can solve the problem of multi-node selected hot zone, for single node internal repeat characters, can be through the last part of the code to solve, so in IE, record the cursor selected position, and the method of reproducing perfect ^_^


============================================

To the Kissy Group asked, the original Jade has done fully compatible with the location of the code, linked to the following
Http://www.jb51.net/article/28120.htm

Code: http://lite-ext.googlecode.com/svn/trunk/lite-ext/playground/range/ie.html

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More