zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Java 回调函数的理解
    Java对象初始化
    Hibernate中get方法和load方法的区别
    Java 如何判断导入表格某列是否有重复数据
    Java学习之Java的单例模式
    Java中怎么设置文件权限
    div居中问题
    JSON
    js
    ajax
  • 原文地址:https://www.cnblogs.com/jiebba/p/9587769.html
Copyright © 2011-2022 走看看