JavaScript 点击复制选中文本代码实例

2019-5-14 14:04| 作者: 蚂蚁小编| 查看: 1828| 评论: 0|来自: 蚂蚁部落

实际应用中,有时候要复制的仅仅是选中的文本,比如选中一段文本,点击一个按钮就将选中的文本复制到某一个地方。

下面就是一段这样的代码实例,希望能够给需要的朋友带来一定的帮助。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>元素的复制</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>

在左边的文本框填写文字之后,选中指定的文本,点击按钮就可以复制到右边的文本框。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

最新评论

返回顶部