<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

<%--    <script src="<%=Config.GetJSAndCss("jquery-1.6.1.min.js") %>" type="text/javascript"></script>--%>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>

</head>

<body>

    <!-- Target -->

    <input id="foo" value="http://testwww.doresuwe.com/four-years/treasure-hunt-game/"  readonly="readonly" style="background:#CCCCCC"/>

    <!-- Trigger -->

    <button class="btn" data-clipboard-target="#foo">

        <img src="https://clipboardjs.com/assets/images/clippy.svg" alt="Copy to clipboard" width="50" height="50" />

    </button>

</body>

</html>

<script>

    $(function () {

        var clipboard = new ClipboardJS('.btn');

        clipboard.on('success', function (e) {

            alert("copy成功！Copy的内容是：" + e.text);

            console.info('Action:', e.action);

            console.info('Text:', e.text);

            console.info('Trigger:', e.trigger);

            e.clearSelection();

        });

        clipboard.on('error', function (e) {

            alert("当前环境不支持复制到粘贴板,请手动复制,蟹蟹٩('ω')و");

            console.error('Action:', e.action);

            console.error('Trigger:', e.trigger);

        });

    })

</script>

clipboardjs复制到粘贴板的更多相关文章

  1. 转JS--通过按钮直接把input或者textarea里的值复制到粘贴板里

    document.activeElement属性为HTML 5中新增的document对象的一个属性,该属性用于返回光标所在元素.当光标未落在页面中任何元素内时,属性值返回body元素. setSel ...

  2. zeroclipboard实现多浏览器复制到粘贴板功能

    zeroclipboard实现多浏览器复制到粘贴板功能(单个复制按钮和多个复制按钮) 为了更好的用户体验,现在很多网站中文本框的内容只需要点击复制按钮这样就能把内容复制到粘贴板了:出于兼容性的考虑,基 ...

  3. js 实现复制到粘贴板功能

    前言:js 或者 jquery 都可以实现的复制到粘贴板功能,有时还想要有换行等格式(同 textarea) 网站地址:我的个人vue+element ui demo网站 github地址:yuleG ...

  4. Vue 实现复制到粘贴板功能

    vue 实现复制到粘贴板功能需要依赖到 clipboard.js 1. 首先需要安装依赖  * 出现错误的话,可以试试 cnpm npm install --save vue-clipboard2 2 ...

  5. javascript网页复制功能-复制到粘贴板-兼容多数浏览器(不使用flash)

    使用方法:clipBordCopy("hello Copy");//执行后复制hello Copy到粘贴板 通过 var result = clipBordCopy("h ...

  6. 使用clipboard插件实现div、textarea、input里面的内容复制到粘贴板

    一.引用clipboard的js文件 二.编写代码.data-clipboard-action=“copy”,代表要执行的动作是复制.data-clipboard-target里面要是要选择复制的元素 ...

  7. C++ 复制到粘贴板

    网上好多教程讲如何复制到剪切板,但是有可能复制的是乱码,为了方便,将CString类型的复制到剪切板 CString source;if (OpenClipboard()){//防止非ASCII语言复 ...

  8. 【C#学习笔记】文本复制到粘贴板

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  9. js复制到粘贴板

    http://www.cnblogs.com/52fhy/p/5383813.html(移动端有兼容性问题) 要页面加载完直接绑定事件,否则第一次点击是绑定事件,第二次才触发事件 移动端需要设置tex ...

随机推荐

  1. springcloud之config配置中心-Finchley.SR2版

    本篇和大家分享的是springcloud-config配置中心搭建,写到这里突然想起自己曾今开源过基于Redis发布订阅编写的一个配置中心,刚看了git星数有点少哈哈,这里顺势发个连接欢迎大侠们点赞: ...

  2. qml demo分析(abstractitemmodel-数据分离)

    一.概述 qt5之后qml也可以被用于桌面程序开发,今天我就拿出qt demo中的一个qml示例程序进行分析.这个demo主要是展示了qml数据和展示分离的使用方式,qml只专注于快速高效的绘制界面, ...

  3. ASP.NET Core中使用GraphQL - 第二章 中间件

    前文:ASP.NET Core中使用GraphQL - 第一章 Hello World 中间件 如果你熟悉ASP.NET Core的中间件,你可能会注意到之前的博客中我们已经使用了一个中间件, app ...

  4. Android中EditText显示明文与密文的两种方式

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 记录输入框显示.隐藏密码的简单布局以及实现方式. 效果图    代码分析 方式一 /**方式一:*/ private void sh ...

  5. 《HelloGitHub》第 30 期

    公告 截止到第 30 期,贡献者 终于到达 3 位数-- 100 位.谢谢各位的支持和贡献,想要加入的小伙伴,快来推荐项目吧! <HelloGitHub>第 30 期 兴趣是最好的老师,H ...

  6. Java集合详解1：ArrayList,Vector与Stack

    今天我们来探索一下LinkedList和Queue,以及Stack的源码. 具体代码在我的GitHub中可以找到 https://github.com/h2pl/MyTech 喜欢的话麻烦star一下 ...

  7. LVS (一) 原理

    LVS原理概述 负载均衡就是,在多个提供相同服务主机的前段,增加一个分发器,根据用户请求,然后根据某种方式或者策略,将用户请求分发到提供服务的主机上.同时负载均衡应用还应该提供对后其后端服务健康检查的 ...

  8. asp.net mvc 简单项目框架的搭建过程（一）对Bll层和Dal层进行充分解耦

    学习asp.net 已经有近三个月的时间了,在asp.net mvc上花的时间最多,但个人真是有些菜,不得不说,asp.net mvc的水真的还是蛮深的.目前在公司实习,也见过公司几个项目的代码了.对 ...

  9. 程序猿想聊天 - 創問 4C 團隊教練心得(二)

    在第二天裡,主要談的是關於 Courage (勇氣) . Co-Create (共創) 的部分因為我們不是真實的團隊,就沒有繼續下去了 一早開始先回顧了一下前一天的內容,接下來我們就開始玩小遊戲 這個 ...

  10. Jmeter API Performance Test

    笔者最近了解 Apache组织开发了基于Java的压力测试工具Apache JMeter.如有兴趣可自行搜索它的相关信息.笔者记录了一些使用方法,如有错误或遗漏,欢迎联系改正. 官方下载地址:http ...