前端复制功能

梦里梦外; 2022-05-16 04:29 186阅读 0赞

### 前端复制功能 ###

在很多场景我们见到很多一键复制的操作（如下图），最近一个react项目中需要实现一个点击复制的功能，拿出来和道友分享一下。  
![这里写图片描述][70]  
实现代码

function copyText(value) { 
      document.designMode = 'on';
      const input = document.createElement('input');
      document.body.appendChild(input);
      input.setAttribute('value', value);
      input.setAttribute('readonly', 'readonly')
      input.select();
      try {
        var successful = document.execCommand('copy');
        var msg = successful ? 'successful' : 'unsuccessful';
        // console.log('Copy email command was ' + msg);
        if(!successful) {
            throw new Error("copy failed");
        }
        Message.success({
          content: "复制成功！"
        });
      } catch (err) {
        console.log('Oops, unable to copy');
        Message.error({
          content: "复制失败，请重试或手动复制"
        })
      }
      document.body.removeChild(input);
      document.designMode = 'off'
    }

实现函数如上所示，designMode说明见参考链接

参考链接

1.  [原生JavaScript实现复制/粘贴][JavaScript]
2.  [clipboard.js][]
3.  [MDN exceCommand 介绍][MDN exceCommand]
4.  [designMode介绍][designMode]

[70]: /images/20220516/640658fbfd0e498495cbc427f82b85bc.png
[JavaScript]: http://www.dengzhr.com/js/1056
[clipboard.js]: https://clipboardjs.com/
[MDN exceCommand]: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
[designMode]: https://developer.mozilla.org/zh-CN/docs/Web/API/Document/designMode

发表评论取消回复

表情：

评论列表（有 0 条评论，186人围观）

还没有评论，来说两句吧...

相关阅读

相关 clipboard复制功能，实现静态复制和动态复制

引入jQuery和clipboard文件 <script src="http://code.jquery.com/jquery-3.4.1.min.js"></scrip

骑猪看日落/ 2023年07月13日 13:53/ 0 赞/ 29 阅读

相关 JS复制功能 Clipboard

Clipboard [http://www.clipboardjs

女爷i/ 2022年12月17日 07:17/ 0 赞/ 185 阅读

相关 HTML 禁止复制功能

有些网站为了不让用户复制，设置了div禁止选择的功能，设置如下属性 unselectable="on" onselectstart="return false;

喜欢ヅ旅行/ 2022年11月19日 01:28/ 0 赞/ 216 阅读

相关 clipboard 实现复制粘贴功能

<el-form-item label="ticketKey"> <span id="code">{ { baseForm.ticketKe

电玩女神/ 2022年10月31日 00:42/ 0 赞/ 309 阅读

相关 Vue实现复制功能

Vue实现复制功能代码 -------------------- 代码 var app = new Vue({ el: 'do

蔚落/ 2022年10月11日 13:49/ 0 赞/ 253 阅读

相关使用js实现复制功能

首先下载复制文件所需的js文件 [https://github.com/zenorocha/clipboard.js][https_github.com_zeno

野性酷女/ 2022年06月08日 10:28/ 0 赞/ 290 阅读

相关前端复制功能

前端复制功能在很多场景我们见到很多一键复制的操作（如下图），最近一个react项目中需要实现一个点击复制的功能，拿出来和道友分享一下。 ![这里写图片描述][70]

梦里梦外;/ 2022年05月16日 04:29/ 0 赞/ 187 阅读

相关小程序复制功能

参考文档：[https://developers.weixin.qq.com/miniprogram/dev/api/wx.getClipboardData.html][htt

你的名字/ 2022年04月04日 12:30/ 0 赞/ 291 阅读

相关移动端触摸复制功能

公司项目之前一个需求，需要用户一进页面触摸手机后就自动帮他复制一个串码。。wtf? 还有这种操作？好吧，需求出来了，那就想实现吧。。。用户进来触摸手机会产生`touchs

今天药忘吃喽~/ 2022年03月28日 04:38/ 0 赞/ 235 阅读

相关 uniapp复制功能

copy(value) { //提示模板 uni.setClipboardData({ data: this.list.id,//复

约定不等于承诺〃/ 2021年07月24日 15:33/ 0 赞/ 531 阅读