要製作一鍵複製文字複製文字至剪貼簿的功能只要利用javascript原生的函式execCommand()就可以了，但是原生的函式只能複製文字欄位<input type=”text”>或文字區域<textarea>裡的資料，如果想要複製<div>或是<p>裡面的資料的話，需要把格式做一些調換，以下分成2個部份來示範。

一、複製文字欄位<input type=”text”>或文字區域<textarea>裡的資料

html

<input type="text" value="Copy Text to Clipboard" id="myInput">
<button onclick="copyFunction()">Copy text</button>

寫在input value=””裡的字文是要用來被複製的
input的id名稱是要給下面js調用的
button用onclick來觸發指令copyFunction()
 
js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script >
$(document).ready(function(){
function copyFunction() {
  var copyText = $("$myInput");
  copyText.select();
  document.execCommand("Copy");
  alert("Copied the text: " + copyText.value);
}
  });
</script>

得到的結果：

一起附上範例使用的css碼

input{
  display: block;
  width: 300px;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin:10px 0;
}
button{
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}

 

二、複製<div>或<p>裡面的資料

html

<p id="myText">Copy Text to Clipboard</p>
<div id="copyBtn" name="myText">Copy Button</div>

文字(p)p的”id”要取得跟按鈕(copybBtn)的”name”一樣，下面的js會自動去找跟按鈕的name的一樣的id來複製
 
js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script >
$(document).ready(function(){
  $("#copyBtn").click(function() {
    var name = $(this).attr('name');
    var el = document.getElementById(name);
    var range = document.createRange();
    range.selectNodeContents(el);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
    document.execCommand('copy');
    alert("Contents copied to clipboard.");
    return false;
  });
});
</script>

得到的結果：

一起附上範例使用的css碼

#myText{
  display: block;
  width: 300px;
  padding: 6px 12px;
  font-size: 24px;
  color: #555;
  margin:10px 0;
}
#copyBtn{
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
  display:inline-block;
  cursor: pointer;
}

 
以下附上從官網貼過來的資料execCommand()的瀏覽器支援清單：