Clipboard.js-实现电脑手机端复制文本到剪贴板功能

发布于 2019-10-15  9 次阅读


起因是在开发apicloud项目时客户需要点击复制功能,因此找到了该插件 Clipboard.js,简单好用


页面原代码是

<pre>
  <!doctype html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>点击复制功能的实现</title></head>
    <body>
      <input id="foo" value="http://www.968309.com/mobile.php">
      <!-- Trigger -->
      <button class="btn" data-clipboard-target="#foo">复制</button></body>
    <div class="inte-content btn" data-clipboard-target="#fooss" id="fuzhi">
      <textarea id="fooss" style="BORDER: none ;width: 100%;height: 225px; resize : none;font-size: 20px;font-weight: bold;" readonly="readonly">Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga.</textarea></div>
    <script src="clipboard.min.js"></script>
    <!--自行下载该插件-->
    <script>
        var clipboard = new ClipboardJS('.btn');
          clipboard.on('success',
          function(e) {
            console.info('Action:', e.action);
            console.info('Text:', e.text);
            console.info('Trigger:', e.trigger);
            e.clearSelection();
            alert('复制成功')
          });

          clipboard.on('error',
          function(e) {
            console.error('Action:', e.action);
            console.error('Trigger:', e.trigger);
          });
      </script>
  </html>
</pre>

看起来像文本,其实用文本域加一些样式


一沙一世界,一花一天堂。君掌盛无边,刹那成永恒。