【js】使用 clipboard.js完成复制粘贴

深碍√TFBOYSˉ_ 2023-08-17 15:23 113阅读 0赞

### [clipboardjs官网][clipboardjs]： ###

### 效果图展示： ###

![20190926110007446.gif][]

### 代码展示：（可直接运行） ###

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>clipboard实现复制粘贴</title>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
      </head>
      <body>
        
       <input type="text" id="foo" value="" />
        <button class="btn" data-clipboard-target="#foo">
            Copy to clipboard
        </button>
    
        <script> 
        document.getElementById('foo').value = '动态的值'+Math.floor(Math.random()*100);
    
        var clipboard = new ClipboardJS('.btn');
        clipboard.on('success', function(e) {    // 复制成功
             // console.info('Action:', e.action);
             console.info('复制的内容:', e.text);
             // console.info('Trigger:', e.trigger);
             e.clearSelection();
         });
         clipboard.on('error', function(e) {     // 复制失败
             console.error('Action:', e.action);
             console.error('Trigger:', e.trigger);
         }); 
         
        </script>
    
      </body>
    </html>

\---------完。

[clipboardjs]: https://clipboardjs.com/#example-text
[20190926110007446.gif]: /images/20230810/db124e2bbc104f5a8772905cf5c349c8.png

发表评论取消回复

表情：

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

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

相关阅读

相关 js 实现复制粘贴功能

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

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

相关 JS复制粘贴另存代码

<SCRIPT> function Preview(obj) { var TestWin=open(''); T

古城微笑少年丶/ 2024年02月17日 22:36/ 0 赞/ 42 阅读

相关【js】使用 clipboard.js完成复制粘贴

[clipboardjs官网][clipboardjs]：效果图展示： ![20190926110007446.gif][] 代码展示：（可直接运行）

深碍√TFBOYSˉ_/ 2023年08月17日 15:23/ 0 赞/ 114 阅读

相关【js】纯js实现复制粘贴

结果图展示： ![20190926104907767.gif][] 代码展示：（可直接拿着运行） <!DOCTYPE html> <html>

「爱情、让人受尽委屈。」/ 2023年08月17日 15:23/ 0 赞/ 125 阅读

相关 js复制html到粘贴板,JS点击按钮复制内容到粘贴板中

写在前面有时候，我们文章中有一段经典代码或者精彩内容，可能会被人复制引用，如果用鼠标选择，非常不友好，尤其是移动端。这时候我们可以给该内容添加点击事件，比如双击复制到粘贴板

叁歲伎倆/ 2022年10月11日 03:53/ 0 赞/ 315 阅读

相关 js 中复制粘贴的使用

<SCRIPT> var bResult; // 选中要剪切的文本。在剪切事件中文本选中区的尾随空格导致剪 // 切选快捷菜单项目保持无效。 function

女爷i/ 2022年09月29日 15:47/ 0 赞/ 310 阅读

相关 JS 实现复制粘贴功能

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

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

相关 js复制粘贴

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

女爷i/ 2022年05月29日 00:48/ 0 赞/ 258 阅读

相关 js复制粘贴

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or

心已赠人/ 2022年05月12日 07:06/ 0 赞/ 256 阅读

相关 mui APP复制粘贴,Native.js复制粘贴

/ @description 获取剪贴板内容 (粘贴) / function getClipbordText() { if

た入场券/ 2022年04月22日 16:24/ 0 赞/ 289 阅读