前端JavaScript-点击复制选中文本代码实例
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了前端JavaScript-点击复制选中文本代码实例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2433字，纯文字阅读大概需要4分钟。
内容图文
实际应用中，有时候要复制的仅仅是选中的文本，比如选中一段文本，点击一个按钮就将选中的文本复制到某一个地方。
下面就是一段这样的代码实例，希望能够给需要的朋友带来一定的帮助。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>元素的复制,web前端学习交流扣qun：731771211 志同道合者进！</title>
<style type="text/css">
body{font-size:18px}
p{border-style:none}
.p1 {
background-color:#FFFFFF;
margin-top:60px;
margin-bottom:3px;
margin-left:200px;
}
.p2 {
background-color:#FFFFFF;
margin-top:2px;
margin-bottom:3px;
margin-left:150px;
}
.p3 {
background-color:#FFFFFF;
margin-top:1px;
margin-bottom:3px;
position:absolute;
left:550px;
top:60px
}
.p4 {
background-color:#FFFFFF;
margin-top:1px;
margin-bottom:3px;
position:absolute;
left:500px;
top:85px
}
.p5 {
background-color:#FFFFFF;
margin-top:1px;
margin-bottom:3px;
position:absolute;
left:380px;
top:190px
}
</style>
<script type='text/javascript'>
function getPositions() {
var el=document.getElementById('shaixuan');
var startPosition=0;//所选文本的开始位置
var endPosition=0;//所选文本的结束位置
if(document.selection) {
//IE
var range = document.selection.createRange();//创建范围对象
var drange = range.duplicate();//克隆对象
drange.moveToElementText(el); //复制范围
drange.setEndPoint('EndToEnd', range);
startPosition = drange.text.length - range.text.length;
endPosition = startPosition + range.text.length;
}
else if(window.getSelection){
//Firefox,Chrome,Safari etc
startPosition = el.selectionStart;
endPosition = el.selectionEnd;
}
return {
"start":startPosition,
"end":endPosition
}
}
function getshaixuan() {
var position=getPositions();
var start=position.start;//开始位置
var end=position.end;//结束位置
var text=document.getElementById('shaixuan').value;
var selectText=text.substr(start,(end-start));//textarea中，选中的文本
//alert(selectText);
var textBox1 = document.getElementById("canjia");
textBox1.innerText=textBox1.value+selectText;
}
window.onload=function(){
var bt=document.getElementById("bt");
bt.onclick=function(){getshaixuan();}
}
</script>
</head>
<body>
<p class="p1">筛选名单</p>
<textarea id="shaixuan" name="check" class="p2"></textarea>
<div class="p3">参加名单</div>
<textarea id="canjia" name="canjia" class="p4"></textarea>
<input type="button" value="内容复制" id="bt" class="p5"/>
</body>
</html>
在左边的文本框填写文字之后，选中指定的文本，点击按钮就可以复制到右边的文本框。
内容总结
以上是互联网集市为您收集整理的前端JavaScript-点击复制选中文本代码实例全部内容，希望文章能够帮你解决前端JavaScript-点击复制选中文本代码实例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】