<strong>Source code: </strong> <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="87443" class="copybut" id="copybut87443" onclick="doCopy('code87443')"><u>Copy code </u></a></span> The code is as follows: </div> <div class="codebody" id="code87443"> <br><! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <br><html> <br>< ;head> <br><meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <br><meta name="Author" content=""> <br><title>Content filtering</title> <br><br><script type='text/javascript'> <br><br>function getPositions() { <br>var el = document.getElementById ('shaixuan'); <br>var startPosition = 0;//The starting position of the selected text<br>var endPosition = 0;//The ending position of the selected text<br>if(document.selection) { <br>//IE <br>var range = document.selection.createRange();//Create range object<br>var drange = range.duplicate();//Clone object<br><br>drange.moveToElementText(el ); //Copy range<br>drange.setEndPoint('EndToEnd', range); <br><br>startPosition = drange.text.length - range.text.length; <br>endPosition = startPosition range.text. length; <br>} <br>else if(window.getSelection) { <br>//Firefox,Chrome,Safari etc <br>startPosition = el.selectionStart; <br>endPosition = el.selectionEnd; <br>} <br>return { <br>"start":startPosition, <br>"end":endPosition <br>} <br>} <br><br>//@todo Get the selected text in textarea <br> function getshaixuan() { <br>var position = getPositions(); <br>var start = position.start;//Start position<br>var end = position.end;//End position<br>var text = document .getElementById('shaixuan').value; <br>var selectText = text.substr(start, (end - start));//In textarea, the selected text <br>//alert(selectText); <br> var textBox1 = document.getElementById("canjia"); <br>textBox1.innerText=textBox1.value selectText; <br>} <br>//]]> <br></script> <br><br><title>Copy of element</title> <br><style type="text/css"> <br><!-- <BR>body{ font-size:18px} <BR> p{border-style:none} <BR>.p1{ background-color:#FFFFFF;margin-top:60px;margin-bottom:3px;margin-left:200px;} <BR>.p2{ background-color: #FFFFFF;margin-top:2px;margin-bottom:3px;margin-left:150px;} <BR>.p3{ background-color:#FFFFFF;margin-top:1px;margin-bottom:3px;position:absolute ;left:550px;top:60px} <BR>.p4{ background-color:#FFFFFF;margin-top:1px;margin-bottom:3px;position:absolute;left:500px;top:85px} <BR>. p5{ background-color:#FFFFFF;margin-top:1px;margin-bottom:3px;position:absolute;left:380px;top:190px} <BR>--> <br></style> <br></head> <br><br><body> <br><p class="p1">Filter list</p> <br><textarea id="shaixuan" name=" check" cols="23" rows="15" class="p2"></textarea> <br><div class="p3">Participant list</div> <br><textarea id="canjia" name="canjia" cols="23" rows="15" class="p4"></textarea> <br><input type="button" value="Content copy" class ="p5" onclick="getshaixuan();"> <br><!--</textarea> <button onclick="getshaixuan()">Get content</button>--> <br><br></body> <br></html> <br> </div> <br><strong>Achieve the effect: </strong> <br><img src="http://files.jb51.net/file_images/article/201311/201311191615255.gif?20131019161541" alt="JS simple implementation of element copying example with picture_Basic knowledge" >
