|
|
|
|
|
|
js/jquery：5行代碼實現點擊按鈕復制文字到剪貼板
作者:admin 時間:2023-12-26 22:46:6 瀏覽:本文介紹如何分別使用JS和jQuery兩種方法來實現點擊按鈕復制文字到剪貼板。代碼很簡單，只需幾行代碼。
效果圖
示例介紹
點擊按鈕時，復制HTML某個元素里的文字到剪貼板，然后你可以粘貼到任何地方。
本示例實現方法是使用JS或jQuery，不需要任何其他第三方插件。
方法1：HTML+JS
<p id="p1">Hello, I'm TEXT 1</p>
<button onclick="copyToClipboard_js('p1')">復制文字1 (js)</button>
<script>
function copyToClipboard_js(element) {
var temp = document.createElement("input"); //聲明創建一個input元素
var txt = document.getElementById(element).innerHTML; //獲得要復制的文字
document.body.appendChild(temp); //在body中追加input元素
temp.value = txt; //把要復制的文字賦予input元素
temp.select(); //選擇要復制的文字
document.execCommand("copy"); //把文字復制到剪貼板
document.body.removeChild(temp); //移除body追加的input元素
}
</script>
代碼分析
請看JS注釋文字。思路是在body追加一個input元素，然后把要復制的文字賦予該input元素里，再使用select()方法選擇input元素里的文字，最后使用document.execCommand("copy");方法把文字復制到剪貼板。
思路邏輯不復雜，實現起來也容易。
方法2：HTML+jQuery
<p id="p1">Hello, I'm TEXT 1</p>
<button onclick="copyToClipboard('#p1')">復制文字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的實現原理是一樣的，只不過使用jQuery時，不要忘了先引用jquery庫文件。
瀏覽器兼容問題
本示例在Chrome、Firefox等主流瀏覽器測試通過。
- 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上完全受支持。
總結
本文介紹了實現點擊按鈕復制文字到剪貼板的方法，分別有JS的方法，和jQuery的方法，它們的原理一樣，代碼簡單，遷移方便，值得推薦使用。
相關文章
標簽: copy copyToClipboard 復制文字 復制
x
