JS实现点击复制目标内容

在实际应用中，我们经常看到这样一种效果：就是单击一个按钮，就将某个区域内的内容，复制到了剪切板中。其实这个功能实现起来也不难，核心就是用到了window子对象clipboardData的一个方法：setData()，直接上代码：

<div id="copyTarget">我是你要复制的目标
</div>
<button id="btnCopy">点击我复制目标文本</button><script>document.getElementById('btnCopy').on('click', function () {var text = document.getElementById('copyTarget').innerText;clipboardData.setData("text", text);   //第一个参数是复制内容的格式，第二个参数是要复制的内容console.log('复制成功了');})
</script>

clipboardData这个方法很方便，它还支持了clearData(sDataFormat) 删除剪贴板中指定格式的数据和getData(sDataFormat) 从剪贴板获取指定格式的数据两种方法，但是，用过这个方法的人都应该知道，这种方法在chrome浏览器不起任何作用，那么在chrome浏览器中我们该怎么办呢？请看下面的代码：

<div id="copyTarget">我是你要复制的目标
</div>
<!-- 这里需要用一个textarea或者input框来接收要复制的目标值，因为方法中的selec()属性是不支持其他标签 -->
<!-- 我们可以用一个样式讲接收的容器隐藏起来 -->
<textarea id="inputBox" style="position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;"></textarea>
<button id="btnCopy">点击我复制目标文本</button><script>document.getElementById('btnCopy').on('click', function () {var copyTarget = document.getElementsById('copyTarget');var copyBox = document.getElementById('inputBox');copyBox.value = copyTarget.innerText;copyBox.select();document.execCommand('copy');console.log('复制成功');})
</script>

JS实现点击复制目标内容相关推荐

【前端技巧】实现点击复制文本内容方法
/*** 点击复制文本内容* * @param {String} content * * @author Outman* @date 2022-10-27*/ // [旧]利用inputElement ...
移动端js实现点击复制到剪贴板，【真正】兼容所有浏览器uc、qq、微信、手机自带等浏览器...
移动端js实现点击复制到剪贴板,带提示,[真正]兼容所有浏览器,包括安卓和ios及uc.qq.微信.手机自带等浏览器. github,欢迎star: https://github.com/majian ...
Clipboard.js 实现点击复制
在开发过程中难免会遇到点击分享的需求,这里有两种实现方式: 第一种: 通过原生js 的方法用(存在兼容性): document.execCommand( aCommandName, aShowDefa ...
vue中实现点击复制文本内容之clipboard
项目中有些场景需要点击复制某段内容并粘贴的功能如点击复制名称,订单号,文章段落等需要先安装引入使用对应的方法 1.安装 npm install clipboard --save 2.引入直接 ...
通过JS实现点击复制页面表格到Excel
本文基于react项目实现. 起因接了一个需求,要求实现点击页面上的一个按钮,复制某个表格数据,然后ctrl+V到Excel表格中. 思考其实我觉着这个功能用导出Excel的方式实现不就好了么.不 ...
点击复制input内容
function copyToClipboard() {var Url2 = document.getElementById("tuijianlianjie");Url2.sele ...
js实现点击复制链接功能
像这种复制链接的功能一般我们把他放在utils文件中. 代码如下: // 文本复制 export function copyText(value) { return new Promise((reso ...
移动端js实现点击复制到剪贴板，【真正】兼容所有浏览器uc、qq、微信、手机自带等浏览器
查看demo 前言:在移动端上经常会遇到这样的需求,第一种就是点击复制当前页面的链接,第二种就是类似卡券的功能,需要复制密码等,之前需求太紧急,基本上都使用了clipboard.js ,使用方法也很简 ...
HTML 鼠标点击复制元素内容
Intro 效果展示方法封装 copyInnerTextOfCell = (event) => {let innerText = event.target.innerText;var tmpI ...

JS实现点击复制目标内容

JS实现点击复制目标内容相关推荐

最新文章

热门文章