要製作一鍵複製文字複製文字至剪貼簿的功能只要利用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>
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>
#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()的瀏覽器支援清單: