前言

最近有一个需求是在文章列表中实现一个【复制链接】的功能。如图：

点击【复制链接】之后，链接将复制到剪切板。可在浏览器中进行粘贴打开。

最终实现方法

最终的实现方法很简单，引一个插件，一行代码搞定。这里演示一个简单的 Demo。

下载 copy-to-clipboard
npm i copy-to-clipboard --save
引入 copy 方法，在点击按钮时调用 copy 方法

import copy from 'copy-to-clipboard';
function coppyUrl(url){copy(url);alert('复制成功');
};
function App(){return <button onClick={()=>coppyUrl('https://www.baidu.com/')}><button>
};
export default App;

中间踩坑

刚开始在网上找了各种 js 实现复制链接的办法。要么出现浏览器兼容性，要么主要是针对原生 DOM 操作。在此记录一下。

1. 只兼容 IE 浏览器

效果：

原理：

使用 window.clipboardData.setData 方法。不过该方法只兼容 IE 浏览器。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><textarea id="input" style="width: 300px; height: 100px">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maxime expedita corporis culpa voluptates deleniti eveniet voluptatem laborum facere quos fugit, obcaecati corrupti repellat voluptatibus iste quae! Illum sint quibusdam velit?</textarea>    <button type="button"  onClick="copyUrl()">点此复制文本框的内容</button><script language="javascript">function copyUrl() {var input = document.getElementById("input");window.clipboardData.setData("Text", input.value);alert("复制成功!");}</script></body>
</html>

2. 浏览器自带的方法实现原生 DOM 复制

效果：

原理：

使用文本域或者输入框的 input.select() 方法。
执行浏览器的 document.execCommand("copy") 命令。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div><textarea id="input" style="width:300px;height:100px">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maxime expedita corporis culpa voluptates deleniti eveniet voluptatem laborum facere quos fugit, obcaecati corrupti repellat voluptatibus iste quae! Illum sint quibusdam velit?</textarea><div><button onclick="copyText()" style="cursor: pointer;">点此复制文本框的内容</button></div></div><script>function copyText() {      var input = document.getElementById("input");//input.value = text; // 修改文本框的内容input.select(); // 选中文本document.execCommand("copy"); // 执行浏览器复制命令alert("复制成功");}</script></body>
</html>

兼容 Firefox 48.0、Chrome 60.0、IE 8 。

3. 使用 clipboard 插件

效果：

原理：

引入 clipboard 插件。
在点击元素中，使用 data-clipboard-action 指定操作类型（copy or cut）。使用 data-clipboard-target 指定复制的目标元素。
实例化 ClipboardJS 对象，参数为点击元素的类名或者id名。
注意：根据 clipboard 插件的版本不同，有的需要实例化 Clipboard 对象。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div><textarea id="input" style="width: 300px; height: 100px">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maxime expedita corporis culpa voluptates deleniti eveniet voluptatem laborum facere quos fugit, obcaecati corrupti repellat voluptatibus iste quae! Illum sint quibusdam velit?</textarea><div><button id="btn"  data-clipboard-action="copy" data-clipboard-target="#input" style="cursor: pointer">点此复制文本框的内容</button></div></div><script src="./clipboard.js"></script>   <script>//使用 dom 属性实现复制功能var clipboard = new ClipboardJS("#btn");//成功与失败打印日志clipboard.on("success", function (e) {console.info("Action:", e.action);console.info("Text:", e.text);console.info("Trigger:", e.trigger);alert("复制成功");e.clearSelection();});clipboard.on("error", function (e) {console.error("Action:", e.action);console.error("Trigger:", e.trigger);});</script></body>
</html>

React 中实现复制到剪切板功能相关推荐

打开 Ubuntu 18 中 Vim 的系统剪切板功能
打开 Ubuntu 18 中 Vim 的系统剪切板功能文章目录打开 Ubuntu 18 中 Vim 的系统剪切板功能 1. 查看 Vim 是否支持系统剪切板 2. 开启系统剪切板功能 3. 系统剪 ...
Android 复制到剪切板功能
Android 复制到剪切板功能-------------- 1.复制到剪切板会使用ClipboardManager,在SDK版本为11前后使用的包不一样.一个是android.text(已弃用),一 ...
vue获取剪切板内容_vue通过clipboard插件实现复制到剪切板功能
1.在package.json添加依赖"dependencies": { "clipboard": "^2.0.0" } 2.页面引入cli ...
使用clipboard实现复制到剪切板功能（超详细~~）
先看看效果: 1.页面中使用 // html <Button type="primary" @click="clickCopy">复制</Bu ...
uniapp 复制到剪切板四端适配
记得很早的时候实现过一次,只不过那次是纯 vue 实现的 h5+,但是想用在 uniapp中还是不行.有些地方不能用!不过在 App 中的方法还是可以使用的: Vue 复制内容到系统剪切板_唐僧的 ...
Web功能之复制粘贴剪切板
目录一.展示 1.代码展示 2.实际效果展示二.具体实现简述步骤三.疑惑与解答一.展示 1.代码展示 <!DOCTYPE html> <html> <head& ...
html复制文字兼容手机,JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)...
新学习JavaScript,就碰到这么一个需求,几乎网上的方法都试过了.写出了总结下使用的方法:clipboard 插件下载地址:https://github.com/zenorocha/clipb ...
html5 js 手机剪切板,JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)...
新学习JavaScript,就碰到这么一个需求,几乎网上的方法都试过了.写出了总结下使用的方法:clipboard 插件下载地址:https://github.com/zenorocha/clipb ...
H5 LayaAir实现复制微信号到剪切板功能
现在微信和QQ可以说普及的非常好了,在做游戏的过程中与玩家进行沟通的时候,经常会设置客服与玩家进行在线的对接和沟通. 所以,为了简化玩家的操作,在游戏里面经常设置<复制微信号>类似的按钮 ...
android输入法剪切板历史记录,讯飞输入法剪切板功能知多少？
原标题:讯飞输入法剪切板功能知多少? 复制+粘贴"是日常操作,但批量复制时前次内容就被覆盖,粘贴很不方便:如果一次复制给多个朋友,依然需要来回操作很不省心:有时翻找上一次或者以前的聊天内容, ...

React 中实现复制到剪切板功能

React 中实现复制到剪切板功能

前言

最终实现方法

中间踩坑

React 中实现复制到剪切板功能相关推荐

最新文章

热门文章