js 一键复制到剪贴板(原生js实现)

简介: js 一键复制到剪贴板(原生js实现)

方式一

// js 点击复制到剪贴板函数
copyToClipboard(content){
    if(window.clipboardData){
         window.clipboardData.setData('text',content);
     }else{
         (function(content){
             document.oncopy=function(e){
                 e.clipboardData.setData('text',content);
                 e.preventDefault();
                 document.oncopy=null;
             }
         })(content);
         document.execCommand('Copy');
     }
 }

方式二

先生成一个input,模拟浏览器选中内容后执行复制命令

let tempInputDOM = document.createElement('input');
tempInputDOM.value = copyData;
document.body.appendChild(tempInputDOM);
tempInputDOM.select(); // 选中input里的内容
document.execCommand("Copy"); // 执行浏览器复制命令
document.body.removeChild(tempInputDOM);
目录
相关文章
|
2天前
|
JavaScript
js 【实用技巧】给全文代码添加一键复制按钮
js 【实用技巧】给全文代码添加一键复制按钮
9 1
|
15天前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
20天前
|
JavaScript
原生JS实现全选、全不选
原生JS实现全选、全不选
|
6天前
|
前端开发 JavaScript 容器
程序技术好文:纯原生javascript下拉框表单美化实例教程
程序技术好文:纯原生javascript下拉框表单美化实例教程
|
16天前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
19 0
|
16天前
|
JavaScript 前端开发
原生JS如何查询元素属性
原生JS如何查询元素属性
13 0
|
2月前
|
前端开发 JavaScript
前端 js 经典:Object 常用原生方法
前端 js 经典:Object 常用原生方法
64 2
|
2月前
|
前端开发 JavaScript
前端 js 经典:array 原生方法
前端 js 经典:array 原生方法
27 1
|
2月前
|
JavaScript 前端开发 索引
JavaScript array 原生 reduce 方法的模拟实现
JavaScript array 原生 reduce 方法的模拟实现
|
1月前
|
JavaScript 开发者 前端开发
浅谈Vue.js与原生开发
Vue.js 是一款流行的前端框架,以其独特的模板语法简化了动态视图创建,通过指令和表达式便捷处理数据。与原生开发相比,Vue.js 提供了Vue Router进行高效路由管理,Vuex进行状态集中管理,以及丰富的生态系统和工具链如Vue CLI。Vue组件化开发、响应式数据绑定和单文件组件提高了代码复用和可维护性,但原生开发在性能和直接操作DOM方面可能更具优势。