js实现复制内容到剪切板的细节

前言

在做web站开发的过程中，需要对某些内容实现复制到剪切板的功能，实现过程中有些不得不说的坑做个小记，避免以后再次踩坑。

1.clipboardData

//该方案仅支持IE内核的浏览器
function copyToClipBoard(copyText) {
        if (window.clipboardData) {
            window.clipboardData.setData("Text", copyText);
        }
}

2.document.execCommand('copy')

//该方案支持主流浏览器
//缺陷在于，在石勇jq的select()选中要copy的元素时仅支持text和textarea,并且需要以用户角度触发copy操作

copy

(function() {

    'use strict';
  
  // click events
  document.body.addEventListener('click', copy, true);

    // event handler
    function copy(e) {

    // find target element
    var 
      t = e.target,
      c = t.dataset.copytarget,
      inp = (c ? document.querySelector(c) : null);
      
    // is element selectable?
    if (inp && inp.select) {
      
      // select text
      inp.select();

      try {
        // copy text
        document.execCommand('copy');
        inp.blur();
        
        // copied animation
        t.classList.add('copied');
        setTimeout(function() { t.classList.remove('copied'); }, 1500);
      }
      catch (err) {
        alert('please press Ctrl/Cmd+C to copy');
      }
      
    }
    
    }

})();