H5 js點(diǎn)擊按鈕復(fù)制文本到粘貼板

更新時(shí)間：2020年11月19日 12:01:49 作者：武當(dāng)山道士

這篇文章主要為大家詳細(xì)介紹了H5 js點(diǎn)擊按鈕復(fù)制文本到粘貼板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js點(diǎn)擊按鈕復(fù)制文本到粘貼板的具體代碼，供大家參考，具體內(nèi)容如下

準(zhǔn)備：先去下載clipboard.js: 官網(wǎng)
移動(dòng)端效果如下：

應(yīng)用：html+js 代碼如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" >
  <script src="/res/js/jquery.min.js"></script>
  <script type="text/javascript" src="/res/js/clipboard.min.js"></script>
  <style>

    body{
      font-weight: 300;
    }
    .code-box{
      border-radius: 5px;
      background: #f0830f;
      height: 80px;
      text-align: center;
    }
    .my-code{
      height: 20px;
      line-height: 20px;
      margin-top: 10px;
     }
    .btn-copy{
      height: 30px;
      line-height: 30px;
      border-radius: 15px;
      font-weight: 400;
      font-size: 14px;
      background-color: #fff1c8;
      color:#F06D4A;
      width: 40%;
      margin: 5px 30%;
    }
  </style>
</head>
<body>
    <div class="text-center">—— 復(fù)制邀請(qǐng)碼，好禮領(lǐng)回家 ——</div>
    <div class="code-box">
      <div class="my-code" id="code">{$code}</div>
      <div class="btn-copy" id="codeBtn" data-clipboard-target="#code">復(fù)制邀請(qǐng)碼</div>
    </div>

    <script>
     $(".btn-copy").click(function(){
     //實(shí)例化clipboard
     var clipboard = new ClipboardJS('#codeBtn');
     clipboard.on("success", function(e){
       alert('復(fù)制成功');
       e.clearSelection();
       clipboard.destroy(); // 如果不銷毀，第一次以后的復(fù)制，會(huì)有重復(fù)的alert彈出
     });
     clipboard.on("error", function(e){
       alert("復(fù)制失敗，請(qǐng)手動(dòng)復(fù)制!");
       clipboard.destroy(); // 如果不銷毀，第一次以后的復(fù)制，會(huì)有重復(fù)的alert
     });
   });
  </script>
</body>
</html>

注意：

一定要銷毀對(duì)象 clipboard.destroy();
如果不銷毀，第一次以后的復(fù)制，會(huì)有重復(fù)的alert

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Javascript中的奇葩知識(shí),你知道嗎?
這篇文章主要介紹了一些Javascript中的奇葩知識(shí)，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下
2021-01-01
詳細(xì)聊聊瀏覽器是如何看閉包的
閉包實(shí)質(zhì)上是函數(shù)作用域的副產(chǎn)物,下面這篇文章主要給大家介紹了關(guān)于瀏覽器是如何看閉包的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
2021-11-11
JS實(shí)現(xiàn)字體選色板實(shí)例代碼
這篇文章主要介紹了JS實(shí)現(xiàn)字體選色板實(shí)例代碼，有需要的朋友可以參考一下
2013-11-11
uniapp通過概率實(shí)現(xiàn)隨機(jī)抽獎(jiǎng)的項(xiàng)目實(shí)踐
在很多電商平臺(tái)或者活動(dòng)中,都會(huì)有類似抽獎(jiǎng)贏優(yōu)惠券的功能,本文主要介紹了uniapp通過概率實(shí)現(xiàn)隨機(jī)抽獎(jiǎng)的項(xiàng)目實(shí)踐,具有一定的參考價(jià)值,感興趣的可以了解一下
2025-04-04
bootstrap模態(tài)框消失問題的解決方法
這篇文章主要為大家詳細(xì)整理了bootstrap模態(tài)框消失不消失各種問題的解決方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
基于JavaScript代碼實(shí)現(xiàn)隨機(jī)漂浮圖片廣告
在網(wǎng)上有很多這樣的代碼，不過未必符合W3C標(biāo)準(zhǔn)，因?yàn)樵陬^部加上<!DOCTYPE html>類似標(biāo)簽之后，漂浮效果就會(huì)失效，下面分享一個(gè)符合標(biāo)準(zhǔn)的漂浮代碼，使需要的朋友免去大量改造代碼的繁瑣
2016-01-01
公眾號(hào)SVG動(dòng)畫交互實(shí)戰(zhàn)代碼
這篇文章主要介紹了公眾號(hào)SVG動(dòng)畫交互實(shí)戰(zhàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
人民幣數(shù)字轉(zhuǎn)換成大寫形式
人民幣數(shù)字轉(zhuǎn)換成大寫形式...
2006-12-12
JS實(shí)現(xiàn)本地存儲(chǔ)信息的方法(基于localStorage與userData)
這篇文章主要介紹了JS實(shí)現(xiàn)本地存儲(chǔ)信息的方法,基于localStorage與userData實(shí)現(xiàn)本地存儲(chǔ)的功能,需要的朋友可以參考下
2017-02-02
p5.js入門教程之鼠標(biāo)交互的示例
這篇文章主要介紹了p5.js入門教程之鼠標(biāo)交互的示例,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-03-03