js 最简单的实现复制到剪切板 xl_copy

使用

npm install xl_copy   // 项目中安装

import clipboard form 'xl_copy'  // 引用
element.onclick = ()=>{
    clipboard('test')  // 复制 test
}

1、介绍

利用原生 js 写一个简单到复制到剪切板工具

点击按钮，实现复制文本到剪切板

用函数形式直接调用

2、知识梳理

1.createTextRange() 方法

IE 似乎不支持

2.createRange()

都不支持

3.setSelectionRange(start,end,diraction)      方法可用

选中 html 元素的内容。实现选取 （ inputElemnt 方法 ）

适用于含有 value 属性到 html 原生，如 input 等

三个参数：开始位置，结束位置，方向

4.select()  方法可用

用于选中 textarea / input 的所有内容

inputElement.select()

5.document.execCommand(commandName,defaultUI,argument)

copy : 复制选中内容到剪切板，存在兼容问题

cut ： 剪切内容到剪切板，存在兼容问题

3、代码实现

利用 select() 方法和 document.execCommand() 来实现

export function clipboard(text) {
    let inputElement = document.createElement('input');
    inputElement.value = text;
    document.body.appendChild(inputElement)
    inputElement.select()
    document.execCommand('copy', true);
    inputElement.parentNode.removeChild(inputElement)
}

　　

4、npm 包使用

npm install xl_copy

import clipboard form 'xl_copy'
element.onclick = ()=>{
    clipboard('test')  // 复制 test
}

　　

想了解更多，想知道更多精华，看看我的博客吧   https://gilea.cn/

https://www.cnblogs.com/jiebba