JavaScript复制内容到剪切板 带格式的复制

简介: JavaScript复制内容到剪切板 带格式的复制

JavaScript复制内容到剪切板 ,是带格式的复制,而不是复制成一串,找了很久,还是这个实用,吧内容传入即可复制成功,并且带格式的

先上代吗

复制页面元素选中内容

function compare(text) {
        var isRTL = document.documentElement.getAttribute('dir') === 'rtl';
        var element = document.createElement('textarea');
        // 防止在ios中产生缩放效果
        element.style.fontSize = '12pt';
        // 重置盒模型
        element.style.border = '0';
        element.style.padding = '0';
        element.style.margin = '0';
        // 将元素移到屏幕外
        element.style.position = 'absolute';
        element.style[isRTL ? 'right' : 'left'] = '-9999px';
        // 移动元素到页面底部
        let yPosition = window.pageYOffset || document.documentElement.scrollTop;
        element.style.top = `${yPosition}px`;
        //设置元素只读
        element.setAttribute('readonly', '');
        element.value = text;
        document.body.appendChild(element);
        var ment =element
        ment.select();
        ment.setSelectionRange(0, ment.value.length);
        document.execCommand('copy');
        ment.remove();
        // alert("已复制到剪切板");
    }

实用方法

let val = `地址:https://www.baidu.com/
账号:123456789
密钥:99999999999999
提示:用于复制工具`
compare(val)

复制后粘贴效果

地址:https://www.baidu.com/
账号:123456789
密钥:99999999999999
提示:用于复制工具

 

大厂面试题分享 面试题库

前后端面试题库 (面试必备) 推荐:★★★★★

地址:前端面试题库  web前端面试题库 VS java后端面试题库大全

相关文章
|
JavaScript 前端开发
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
|
算法 开发者
Moment.js库是如何处理不同浏览器的时间戳格式差异的?
总的来说,Moment.js 通过一系列的技术手段和策略,有效地处理了不同浏览器的时间戳格式差异,为开发者提供了一个稳定、可靠且易于使用的时间处理工具。
943 156
|
机器学习/深度学习 JSON JavaScript
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
969 0
|
SQL 安全 数据库
用html+javascript打造公文一键排版系统2:显示源码/显示预览、清除格式
用html+javascript打造公文一键排版系统2:显示源码/显示预览、清除格式
|
XML JSON JavaScript
js的json格式
js的json格式
|
JavaScript
将jq转为原生js格式
将jq转为原生js格式
187 2
|
存储 资源调度 前端开发
JavaScript 使用axios库发送 post请求给后端, 给定base64格式的字符串数据和一些其他参数, 使用表单方式提交, 并使用onUploadProgress显示进度
使用 Axios 发送包含 Base64 数据和其他参数的 POST 请求时,可以通过 `onUploadProgress` 监听上传进度。由于整个请求体被视为一个单元,所以进度可能不够精确,但可以模拟进度反馈。前端示例代码展示如何创建一个包含 Base64 图片数据和额外参数的 `FormData` 对象,并在上传时更新进度条。后端使用如 Express 和 Multer 可处理 Base64 数据。注意,实际进度可能不如文件上传精确,显示简单加载状态可能更合适。
文本vitepress,如何设置背景图,如何插入背景图,如何插入logo,为了放背景图片,我们要新建pubilc的文件夹,插入logo要在config.js中进行配置,注意细节,在添加背景时,注意格式
文本vitepress,如何设置背景图,如何插入背景图,如何插入logo,为了放背景图片,我们要新建pubilc的文件夹,插入logo要在config.js中进行配置,注意细节,在添加背景时,注意格式
|
JavaScript 前端开发
js数组包对象格式怎么根据不同的键值使用sort排序一组数组
js数组包对象格式怎么根据不同的键值使用sort排序一组数组
259 0
编程笔记 html5&css&js 007 HTML文本:段落和格式
编程笔记 html5&css&js 007 HTML文本:段落和格式
239 1