卡卡網(wǎng)

本文介紹如何分別使用JS和jQuery兩種方法來(lái)實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制文字到剪貼板。代碼很簡(jiǎn)單，只需幾行代碼。

效果圖

demodownload

示例介紹

點(diǎn)擊按鈕時(shí)，復(fù)制HTML某個(gè)元素里的文字到剪貼板，然后你可以粘貼到任何地方。

本示例實(shí)現(xiàn)方法是使用JS或jQuery，不需要任何其他第三方插件。

方法1：HTML+JS

<p id="p1">Hello, I'm TEXT 1</p>
<button onclick="copyToClipboard_js('p1')">復(fù)制文字1 (js)</button>
<script>
function copyToClipboard_js(element) {
  var temp = document.createElement("input"); //聲明創(chuàng)建一個(gè)input元素
  var txt = document.getElementById(element).innerHTML; //獲得要復(fù)制的文字
  document.body.appendChild(temp); //在body中追加input元素
  temp.value = txt; //把要復(fù)制的文字賦予input元素
  temp.select(); //選擇要復(fù)制的文字
  document.execCommand("copy"); //把文字復(fù)制到剪貼板
  document.body.removeChild(temp); //移除body追加的input元素
}
</script>

代碼分析

請(qǐng)看JS注釋文字。思路是在body追加一個(gè)input元素，然后把要復(fù)制的文字賦予該input元素里，再使用select()方法選擇input元素里的文字，最后使用document.execCommand("copy");方法把文字復(fù)制到剪貼板。

思路邏輯不復(fù)雜，實(shí)現(xiàn)起來(lái)也容易。

方法2：HTML+jQuery

<p id="p1">Hello, I'm TEXT 1</p>
<button onclick="copyToClipboard('#p1')">復(fù)制文字1 (jquery)</button>
<script src="jquery.min.js"></script>
<script>
function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
}
</script>

代碼分析

jQuery與JS的實(shí)現(xiàn)原理是一樣的，只不過(guò)使用jQuery時(shí)，不要忘了先引用jquery庫(kù)文件。

瀏覽器兼容問(wèn)題

本示例在Chrome、Firefox等主流瀏覽器測(cè)試通過(guò)。

• IE上的Document.ExecCommand()在5.5-11上完全受支持。
• Edge上的Document.ExecCommand()在12-111上完全受支持。
• Firefox上的Document.ExecCommand()在9-113上完全受支持。
• Chrome上的Document.ExecCommand()在4-114上完全受支持。
• Safari上的Document.ExecCommand()在6.1-16.4上完全受支持。
• Opera上的Document.ExecCommand()在10.5-95上完全受支持。
• iOS 上 Safari上的Document.ExecCommand()在7-16.4上完全受支持。
• Android 瀏覽器上的Document.ExecCommand()在4.4-111上完全受支持。
• Opera Mobile上的Document.ExecCommand()在10-73上完全受支持。
• Chrome for Android上的Document.ExecCommand()在97-111上完全受支持。
• Firefox for Android上的Document.ExecCommand()在95-110上完全受支持。
• Samsung Internet上的Document.ExecCommand()在4-20上完全受支持。

總結(jié)

本文介紹了實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制文字到剪貼板的方法，分別有JS的方法，和jQuery的方法，它們的原理一樣，代碼簡(jiǎn)單，遷移方便，值得推薦使用。

相關(guān)文章

• clipboard.js，支持各種瀏覽器的文本復(fù)制實(shí)現(xiàn)方法
• JS實(shí)例：點(diǎn)擊復(fù)制文字到剪貼板

標(biāo)簽: copy  copyToClipboard  復(fù)制文字  復(fù)制