原生js实现剪切板的使用

990 阅读1分钟

有时候需要操作剪切板,比如“复制”一段文本

1571653555(1).jpg

思路如下:

  1. 构造一个textarea元素(该元素只是临时使用,看不见但是存在)
  2. 给元素的内容赋值为你所想要copy的文本
  3. 挂载元素
  4. 全选元素中的文本
  5. 聚焦元素(focus)
  6. 调用execCommand方法
  7. 把元素remove掉

代码如下:

var content='被复制文本,test';


/*构造一个textarea*/
let fakeElem = document.createElement('textarea');

/*该textarea必须存在,即display不能为none,但是又要看不见*/
fakeElem.style.fontSize = '12pt';                 //防止元素能在ios上缩放
fakeElem.style.border = '0';                      //修改元素的样式
fakeElem.style.padding = '0';
fakeElem.style.margin = '0';
fakeElem.style.position = 'absolute';             //将元素水平移出屏幕可视区域
fakeElem.style.left = '-9999px';
var yPosition = window.pageYOffset || document.documentElement.scrollTop;        
fakeElem.style.top = yPosition + 'px';            //在垂直方向移动相同距离
fakeElem.setAttribute('readonly', '');            //设置为不可读

fakeElem.value = content;                         //赋值

document.body.appendChild(fakeElem);              //挂载元素

/*选中元素中的文本,下面为兼容写法*/
if(fakeElem.createTextRange){//IE浏览器
    var range = fakeElem.createTextRange();         
    range.moveStart("character", 0);
    range.moveEnd("character",content.length);
    range.select();
}else{
    fakeElem.setSelectionRange(0, content.length);
    fakeElem.focus();
}

/*调用execCommand,复制选中区域文本*/
document.execCommand('copy');

/*remove元素*/
document.body.removeChild(fakeElem);

p.s. 当然,上面这段代码应该封装成一个方法,传不同的content进去