IOS美区账号微信: springsunshine2017

前端技术 · 2020年9月10日 0

原生js实现一键复制到剪切板的功能

一键复制其实在应用型网站中经常会用到,原理其实也是很简单的
第一步:创建一个textarea元素。
var textArea = document.createElement(“textarea”);

第二步:给新创建的元素赋值
textArea.value = text;

第三步:将textArea元素插入到DOM中
document.body.appendChild(textArea);

第四步:选中textArea元素中的文本
textArea.select();

第五步:使用execCommand(‘copy’)实现复制
try {
      var successful = document.execCommand(‘copy’);
      var msg = successful ? ‘成功复制到剪贴板’ : ‘该浏览器不支持点击复制到剪贴板’; 
     alert(msg);    
} catch (err) {
      alert(‘该浏览器不支持点击复制到剪贴板’);    
}

第六步:移除刚创建的元素
document.body.removeChild(textArea);

以下是完整的函数代码,直接复制调用即可:

function copyToClipboard (text) {    if(text.indexOf(‘-‘) !== -1) {        let arr = text.split(‘-‘);        text = arr[0] + arr[1];    }    var textArea = document.createElement(“textarea”);    textArea.style.position = ‘fixed’;    textArea.style.bottom = ‘0’;    textArea.style.left = ‘0’;    textArea.style.width = ’20px’;    textArea.style.height = ’20px’;    textArea.style.padding = ‘0’;    textArea.style.border = ‘none’;    textArea.style.outline = ‘none’;    textArea.style.boxShadow = ‘none’;    textArea.style.background = ‘transparent’;    textArea.value = text;    document.body.appendChild(textArea);    textArea.select();
    try {      var successful = document.execCommand(‘copy’);      var msg = successful ? ‘成功复制到剪贴板’ : ‘该浏览器不支持点击复制到剪贴板’;      alert(msg);    } catch (err) {      alert(‘该浏览器不支持点击复制到剪贴板’);    }
    document.body.removeChild(textArea);  }

以上就是原生js实现一键复制到剪切板的功能的全部功能,欢迎一起交流讨论前端哦