html5頁面如何實現點擊複製的功能（完整程式碼）-H5教程-PHP中文網

首頁

web前端

H5教程

html5頁面如何實現點擊複製的功能（完整程式碼）

不言

Sep 01, 2018 pm 01:44 PM

複製

這篇文章帶給大家的內容是關於html5頁面如何實現點擊複製的功能（完整程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

在實際工作中，有時會遇到這樣的需求，頁面上有一個鏈接，不需要選中鏈接內容，只需要點擊複製按鈕，就可以把鏈接內容複製到剪切板。這時候可以使用clipboard外掛來實現。以下是一個簡單的demo。

首先可以透過npm install clipboard --save-dev 來安裝該外掛程式

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>clipboard示例</title>
    <script src="lib/clipboard/dist/clipboard.min.js"></script>
</head>
<body>

<h2 id="从属性里复制">从属性里复制</h2>
<!--data-clipboard-text属性的值将会被复制-->
<p id="btn" class="js-copy" data-clipboard-text="111-从属性复制">
    <span>复制到剪切板-111</span>
</p>
<hr>

<h2 id="从另外一个元素复制内容">从另外一个元素复制内容</h2>
<textarea id="bar">222-从另外一个元素复制内容</textarea>
<button id="btn2" data-clipboard-target="#bar">复制到剪切板-222</button>
<hr>

<h2>JS里指定复制的内容
<button id="btn3" data-clipboard-target="#bar">复制到剪切板-333</button></h2>

<script>

    //从属性里复制
    var btn = document.getElementById(&#39;btn&#39;);
    var clipboard = new Clipboard(btn);//实例化
    clipboard.on(&#39;success&#39;, function(e) {//复制成功执行的回调，可选
        console.log(e);
    });
    clipboard.on(&#39;error&#39;, function(e) {//复制失败执行的回调，可选
        console.log(e);
    });


    //从另外一个元素复制内容
    var btn2 = document.getElementById(&#39;btn2&#39;);
    var clipboard2 = new Clipboard(btn2);//实例化
    clipboard2.on(&#39;success&#39;, function(e) {//复制成功执行的回调，可选
        console.log(e);
    });
    clipboard2.on(&#39;error&#39;, function(e) {//复制失败执行的回调，可选
        console.log(e);
    });


    //JS里指定复制的内容
    var btn3 = document.getElementById(&#39;btn3&#39;);
    var clipboard3 = new Clipboard(btn3, {
        text: function() {
            return &#39;333-JS里指定复制的内容&#39;;
        }
    });
    clipboard3.on(&#39;success&#39;, function(e) {//复制成功执行的回调，可选
        console.log(e);
    });
    clipboard3.on(&#39;error&#39;, function(e) {//复制失败执行的回调，可选
        console.log(e);
    });

</script>
</body>
</html>

效果圖：

點擊完複製按鈕後，成功回呼函數就會輸出一個對象，該對象包含了複製的內容等資訊。這時候，在其他輸入文字的地方使用貼上快速鍵就可以把剪貼的內容貼到你需要的地方了。

html5頁面如何實現點擊複製的功能（完整程式碼）

相關推薦：

HTML5 拖曳複製功能的實作

##html5頁面點擊和左右滑動頁面捲動_html/css_WEB-ITnose

以上是html5頁面如何實現點擊複製的功能（完整程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

H5：網絡標準和技術的發展Apr 15, 2025 am 12:12 AM

Web标准和技术从HTML4、CSS2和简单的JavaScript演变至今，经历了显著的发展。1)HTML5引入了Canvas、WebStorage等API，增强了Web应用的复杂性和互动性。2)CSS3增加了动画和过渡功能，使页面效果更加丰富。3)JavaScript通过Node.js和ES6的现代化语法，如箭头函数和类，提升了开发效率和代码可读性，这些变化推动了Web应用的性能优化和最佳实践的发展。

H5是HTML5的速記嗎？探索細節Apr 14, 2025 am 12:05 AM

H5不僅僅是HTML5的簡稱，它代表了一個更廣泛的現代網頁開發技術生態：1.H5包括HTML5、CSS3、JavaScript及相關API和技術；2.它提供更豐富、互動、流暢的用戶體驗，能在多設備上無縫運行；3.使用H5技術棧可以創建響應式網頁和復雜交互功能。

H5和HTML5：網絡開發中常用的術語Apr 13, 2025 am 12:01 AM

H5與HTML5指的是同一個東西，即HTML5。 HTML5是HTML的第五個版本，帶來了語義化標籤、多媒體支持、畫布與圖形、離線存儲與本地存儲等新功能，提升了網頁的表現力和交互性。

H5指的是什麼？探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5：工具，框架和最佳實踐Apr 11, 2025 am 12:11 AM

H5開發需要掌握的工具和框架包括Vue.js、React和Webpack。 1.Vue.js適用於構建用戶界面，支持組件化開發。 2.React通過虛擬DOM優化頁面渲染，適合複雜應用。 3.Webpack用於模塊打包，優化資源加載。

HTML5的遺產：當前了解H5Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee