js 最简单的实现复制到剪切板 xl_copy-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

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

简介: 使用   npm install xl_copy // 项目中安装 import clipboard form 'xl_copy' // 引用 element.onclick = ()=>{     clipboard('test')  // 复制 test }   1、介绍     利用原生...

使用

 

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

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章