簡單的clipboard-設置copy文本

介紹

如今因隱私保護，因此不少新版本的瀏覽器都再也不支持clipbaordData訪問粘貼板，網絡中利用clipbaordData來解決設置copy文本的方法已經不可用了。本文將介紹如何實現一個自定義設置copy文本。copy非文本內容請參考clipboard.js。

思路

參考自clipboard.js的源碼。
思路是建立一個不可見的textarea，將要複製的內容賦值給textarea.value。而後textarea.select()，達到選中的效果；
最後執行document.execCommand('copy')，copy完成。

實現

支持IE9+，chrome，FF等瀏覽器。用typescript寫的須要編譯後使用。(僅供參考)

export Class Clipboard {
  private ids: Array = [];
  private handler: any = {};
  private options: any = {};
  private elm: Element = null;
  construtor(id = '', opt = {}){
    this.options = opt;
    this.Init(id);
  }
  // 銷燬對象
  public Destroy() {
    // 刪除 textarea
    const parent = this.elm.parentElement;
    parent.removeChild(this.elm);
    // 解綁click事件
    const ids = this.ids;
    const len = ids.length;
    const fn = this.handler.fn;
    for(let i = 0; i < len; i++){
      ids[i].removeEventListener('click', fn);
    }
    this.ids = null;
  }
  public setCopyContent(content) {
    const elm = this.elm;
    elm.value = content;
    elm.select();
    // 設置當前光標選擇穩步的位置--不使用也可正常複製
    // elm.setSelectionRange(0, content.length);
    document.execCommand('copy');
    
  }
// 獲取id相關的element並綁定click事件執行setCopyConetent
  private Init(id) {
    const self = this;
    const ids = this.ids = document.querySelectorAll(id);
    this.elm = this.CreateTextArea();
    const len = ids.length;
    this.handler = {
      fn: (ev) => {
        return this.ClickHandler(ev);
      }
    };
    for(let i = 0; i < len; i++) {
      ids[i].addEventListener('click', this.handler.fn);
    }
  }
  private ClickHandler(ev) {
    let text = '';
    const opt = this.options;
    if (typeof opt.text) {
      text = opt.text(ev);
    } else {
      text = opt.text;
    }
    this.setCopyContent(text);
  }
// 建立不可見的textarea
  private CreateTextArea() {
    const el = document.createElement('textarea');
    el.style = {
      width: '0px',
      height: '0px',
      position: 'fixed',
      top: '-10px'
    };
    el.setAttribute('readonly', '');
    document.body.appendChild(el);
    return el;
  }
  
}

使用

const clip = new Clipboard();
clip.setClipContent('test copy');
// or
const clip = new Clipboard('.btn', {
// text: 'test copy'
text: function(ev){
return ev.target.getAttribute('data-copy')
}
});