JavaScript 點選複製選中文字程式碼例項

螞蟻小編發表於2019-05-14
JavaScript

實際應用中，有時候要複製的僅僅是選中的文字，比如選中一段文字，點選一個按鈕就將選中的文字複製到某一個地方。

下面就是一段這樣的程式碼例項，希望能夠給需要的朋友帶來一定的幫助。

程式碼例項如下:

[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>

在左邊的文字框填寫文字之後，選中指定的文字，點選按鈕就可以複製到右邊的文字框。

相關文章