h5微信瀏覽器復制粘貼--ios兼容問題的解決方法（clipboard.js插件）

本文轉載自查看原文 2019-08-13 18:09 1187 ios復制兼容

前段時間在做微信h5的時候，遇到了ios兼容，使用clipboard.js插件完美解決

下載地址：下載地址： https://github.com/zenorocha/clipboard.js

cnd 引入js ： https://cdn.staticfile.org/clipboard.js/1.5.15/clipboard.min.js

html部分：

<div id="foo">需要被粘貼的內容</div> 
<!-- 復制按鈕 -->
<a class="copyBtn"  href="javascript:"  data-clipboard-action="copy"  data-clipboard-target="#foo"></a>

js部分：

 var clipboard = new Clipboard('.copyBtn').on('success', function(e) {
        var e = e || window.event;
        console.log('復制成功！！！');
    }).on('error', function(e) {});

完整

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>iOS復制兼容</title>
</head>
<body>
    <div id="foo">需要被粘貼的內容</div> 
    <!-- 復制按鈕 -->
    <a class="copyBtn"  href="javascript:"  data-clipboard-action="copy"  data-clipboard-target="#foo"></a>
  <script type="text/javascript" src="https://cdn.staticfile.org/clipboard.js/1.5.15/clipboard.min.js"></script>
  <script>
    window.onload = function(){
      var clipboard = new Clipboard('.copyBtn').on('success', function(e) {
        var e = e || window.event;
        console.log('復制成功！！！');
    }).on('error', function(e) {});
  }
  </script>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 讓微信內置瀏覽器兼容clipboard.js 復制粘貼 ios 安卓復制粘貼插件clipboard.js使用方法前端復制粘貼clipBoard.js的使用 JS中常遇到的瀏覽器兼容問題和解決方法 js Date()日期函數瀏覽器兼容問題解決方法 JS中常遇到的瀏覽器兼容問題和解決方法 JS中常遇到的瀏覽器兼容問題和解決方法解決UC瀏覽器或微信瀏覽器上flex兼容問題 Clipboard.js移動端【ios】復制事件不生效解決方法 H5兼容問題及解決方法