Salin pelayar pemalam zeroclipboard kemahiran penggunaan guide

Rumah

hujung hadapan web

tutorial js

Salin pelayar pemalam zeroclipboard kemahiran penggunaan guide_javascript

May 16, 2016 pm 03:07 PM

Contoh mudah:

&lt;html&gt;
 &lt;body&gt;
  &lt;button id="copy-button" data-clipboard-text="Copy Me!" title="Click to copy me."&gt;Copy to Clipboard&lt;/button&gt;
  &lt;script src="~/Scripts/jquery-1.7.1.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/ZeroClipboard.js"&gt;&lt;/script&gt;
 &lt;/body&gt;
 &lt;script&gt;
 
 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();
    });
 &lt;/script&gt;
&lt;/html&gt;

Salin selepas log masuk

Versi 2.2 perlu merujuk jquery, dan anda perlu membiasakan diri untuk menulis kod js di bahagian bawah halaman Selepas ujian, didapati bahawa kod ini tidak menyokong IE10/11 dengan IE, cuma ganti bahagian js

&lt;script&gt;
    $(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;
    }
  &lt;/script&gt;

Salin selepas log masuk

Akhir sekali, sila ambil perhatian bahawa jangan menjadualkan secara setempat, anda akan mendapati bahawa ia tidak akan berkuat kuasa disebabkan oleh sekatan keselamatan Flash

kod sumber papan sifar: https://github.com/zeroclipboard/zeroclipboard
tapak web rasmi zeroclipboard: zeroclipboard.org

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn