简单的clipboard-设置copy文本

2020-08-02T08:10:15
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

介绍

现在因隐私保护,所以很多新版本的浏览器都不再支持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')
}
});
扫一扫关注公众号添加购物返利助手,领红包
当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »
因本文不是用Markdown格式的编辑器书写的,转换的页面可能不符合MIP标准。