使用clipboard.js实现复制功能

青旅半醒 2022-05-23 07:11 281阅读 0赞

最近在开发中，使用原生js复制时，发现在360 7.1的低版本中无法实现代码的复制，

随后便网上找了插件实现复制功能，检验后，发现在低版本也支持

demo：

<input id="contents" type="text" value="" style="position: relative;z-index: -9999 ">

<button class="ydCopy" @click="copyUri" data-clipboard-action="copy" data-clipboard-target="#contents">复制链接</button>

id为contents的input输入框是作为复制的目标对象，button作为点击按钮，图中button使用了vue，

js脚本中

copyUri: function () {
    
        /*var e=document.getElementById("contents");//对象是contents e.select(); //选择对象 （全选） document.execCommand("Copy"); //执行浏览器复制命令*/

var clipboard = new ClipboardJS('.ydCopy');
    
    clipboard.on('success', function(e) {
      
        common.layer.msg("链接复制成功！");
    });
    
    clipboard.on('error', function(e) {
       
        layer.alert('链接复制失败，请手动复制下载地址：<br/> <span style="color: blue;">' + $('#contents').val() + '</span>', {
            skin: 'layui-layer-molv' //样式类名
            ,closeBtn: 0
        }, function(){
         layer.closeAll();
        });
    });

\}

三行代码解决！（引入clipboard.js 文件）

clipboard.js源码地址：[https://github.com/zenorocha/clipboard.js][https_github.com_zenorocha_clipboard.js]

里面的demo模块中有具体的例子，简单且实用

[https_github.com_zenorocha_clipboard.js]: https://github.com/zenorocha/clipboard.js

发表评论取消回复

表情：

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

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

相关阅读

相关 js 实现复制粘贴功能

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8...

本是古典何须时尚/ 2024年04月18日 21:58/ 0 赞/ 88 阅读

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

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

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

相关 clipboard 实现复制粘贴功能

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

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

相关使用js实现点击复制功能的代码

使用js实现点击复制功能的代码 <!doctype html> <html> <head> <meta

不念不忘少年蓝@/ 2022年10月25日 01:22/ 0 赞/ 333 阅读

相关 Vue实现复制功能

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

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

相关 vue使用document.execCommand(‘Copy‘)实现复制功能

// 复制 doCopy(){ const input = document.createElement('input'); input.v

た入场券/ 2022年10月08日 11:20/ 0 赞/ 15 阅读

相关 JS 实现复制粘贴功能

JS 实现复制粘贴功能目前没有做过多的测试，只是测试了几个手机，介绍：支持情况（1）移动端： 1. chrome（版本 58.0.3029.96 (64

柔光的暖阳◎/ 2022年06月15日 04:57/ 0 赞/ 289 阅读

相关使用js实现复制功能

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

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

相关使用clipboard.js实现复制功能

最近在开发中，使用原生js复制时，发现在360 7.1的低版本中无法实现代码的复制，随后便网上找了插件实现复制功能，检验后，发现在低版本也支持 demo： <i

青旅半醒/ 2022年05月23日 07:11/ 0 赞/ 282 阅读

相关 clipboard.js复制功能实现

前言 clipboard.js是前端实现复制文本到剪贴板的插件，简单记录一下使用方法。具体使用 1.简单的demo <!DOCTYPE html>

拼搏现实的明天。/ 2022年05月18日 09:05/ 0 赞/ 320 阅读