Guide d'utilisation du plug-in de copie du navigateur Zeroclipboard_compétences Javascript-js tutoriel-php.cn

Guide d'utilisation du plug-in de copie du navigateur Zeroclipboard_compétences Javascript

WBOY

Libérer： 2016-05-16 15:07:54

original

1060 Les gens l'ont consulté

Un exemple simple :

<html>
 <body>
  <button id="copy-button" data-clipboard-text="Copy Me!" title="Click to copy me.">Copy to Clipboard</button>
  <script src="~/Scripts/jquery-1.7.1.js"></script>
  <script src="~/Scripts/ZeroClipboard.js"></script>
 </body>
 <script>
 
 var client = new ZeroClipboard( $("#copy-button") );
  client.on('ready', function (event) {
 
      client.on('copy', function (event) {
        event.clipboardData.setData('text/plain', event.target.innerHTML);
        alert("复制成功");
      });
 
      client.on('aftercopy', function (event) {
        //复制之后的操作，如果不是自动在本页面粘贴，请把此事件备注掉
        console.log('Copied text to clipboard: ' + event.data['text/plain']);
      });
    });
 
    client.on('error', function (event) {
      //出错的时候该干嘛
      // console.log( 'ZeroClipboard error of type "' + event.name + '": ' + event.message );
      ZeroClipboard.destroy();
    });
 </script>
</html>

Copier après la connexion

La version 2.2 doit faire référence à jquery, et vous devez vous habituer à écrire le code js en bas de page. Après tests, il a été constaté que ce code ne prend pas en charge IE10/11. Ce qui suit fournit des fonctions compatibles. avec IE, remplacez simplement la partie js

<script>
    $(function() {
      var text="取文本";
      var msg="复制成功";
      clipboard("btn_copy",text,msg);
    });
 
    //参数说明
    //button:按钮id
    //text:要复制的文本
    //msg:复制成功提示文本
    function clipboard(button,text,msg) {
 
      if (window.clipboardData) {    //for ie
        var copyBtn = document.getElementById(button);
        copyBtn.onclick = function () {
          window.clipboardData.setData('text', text);
          alert(msg);
        }
      } else {
        var client = new ZeroClipboard($("#" + button));
        client.on('ready', function (event) {
 
          client.on('copy', function (event) {
            event.clipboardData.setData("text/plain", text);
            alert(msg);
          });
        });
 
        client.on('error', function (event) {
          ZeroClipboard.destroy();
        });
      }
      return false;
    }
  </script>

Copier après la connexion

Enfin, veuillez noter que ne planifiez pas localement, vous constaterez que cela ne prendra pas effet en raison des restrictions de sécurité Flash

Code source de Zeroclipboard : https://github.com/zeroclipboard/zeroclipboard
Site officiel de zeroclipboard : zeroclipboard.org