原生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实现一键复制到剪切板的功能的全部功能，欢迎一起交流讨论前端哦