html5页面实现点击复制功能的插件clipboard.js

以你之姓@ 2021-08-13 19:51 811阅读 0赞

参考：[http://www.clipboardjs.cn/][http_www.clipboardjs.cn]

参考：[https://codeload.github.com/zenorocha/clipboard.js/zip/master][https_codeload.github.com_zenorocha_clipboard.js_zip_master]

<!DOCTYPE html>
    <head>
        <meta charset="UTF-8">
        <title>clipboard示例</title>
        <script src="clipboard.js"></script>
        <script src="jquery-3.4.1.min.js"></script>
    </head>
    <body>
    
    
    <input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
    
    
    
    <button class="btn" data-clipboard-target="#foo">
        点击一下复制
    </button>
    
    
    <button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
        Copy to clipboard
    </button>
    
    </body>
    <script>
    
        $(() => {
            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);
    
                e.clearSelection();
            });
    
            clipboard.on('error', function(e) {
                console.error('Action:', e.action);
                console.error('Trigger:', e.trigger);
            });
        });
        
    
    </script>
    </html>

[http_www.clipboardjs.cn]: http://www.clipboardjs.cn/
[https_codeload.github.com_zenorocha_clipboard.js_zip_master]: https://codeload.github.com/zenorocha/clipboard.js/zip/master

发表评论取消回复

表情：

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

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

相关阅读

相关 HTML页面点击按钮关闭页面的方式

这篇文章给大家分享HTML页面点击按钮关闭页面的几种方式，实现思路非常简单，有不带任何方式的关闭窗口，提示之后关闭页面，点击关闭本页面并跳转到其他页面等等，每种方式结合实例代码

系统管理员/ 2024年03月31日 14:12/ 0 赞/ 78 阅读

相关 vue中 element 实现点击复制粘贴功能

copyUrl(data){ let url = data; let oInput = document.create

深碍√TFBOYSˉ_/ 2022年12月23日 12:28/ 0 赞/ 289 阅读

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

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

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

相关 firefox html 插件,Firefox插件的HTML页面点击功能

Scenario: Add-on detects phone numbers on a web page and highlights it by hyperlink. Whe

﹏ヽ暗。殇╰゛Y/ 2022年10月06日 13:54/ 0 赞/ 243 阅读

相关 html5 自动点击事件,HTML5 自定义点击事件

HTML5 自定义点击事件 /\封装的TAP事件\/(function() \{/\\ \ IOS 和 PC 端只需要创建一次就能一直使用 \ Android 手机每

分手后的思念是犯贱/ 2022年10月06日 08:59/ 0 赞/ 344 阅读

相关 html页面插件格式,jq插件格式.html

Document body\{ margin:400px;\} i.unread\{ display:inline-block; width:11px; height:11

忘是亡心i/ 2022年10月06日 04:56/ 0 赞/ 320 阅读

相关 js实现点击按钮复制文本功能

最近遇到一个需求，需要点击按钮，复制 <p> 标签中的文本到剪切板之前做过复制输入框的内容，原以为差不多，结果发现根本行不通尝试了各种办法，最后使了个障眼法，实现了下面

女爷i/ 2022年08月28日 06:59/ 0 赞/ 286 阅读

相关在 HTML 页面中实现点击返回

/ 点击返回 / $('.back').click(function () {

末蓝、/ 2022年05月27日 13:23/ 0 赞/ 619 阅读

相关 HTML分页插件功能实现

分页功能实现案例展示如下：![在这里插入图片描述][20181116133259683.png] 1.先引入css样式和jQuery，再引入分页插件toPage.js，谨记顺

分手后的思念是犯贱/ 2022年04月16日 03:37/ 0 赞/ 1222 阅读

相关 html5页面实现点击复制功能的插件clipboard.js

参考：[http://www.clipboardjs.cn/][http_www.clipboardjs.cn] 参考：[https://codeload.github

以你之姓@/ 2021年08月13日 19:51/ 0 赞/ 812 阅读