<!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. 8-Flink中的窗口

    戳更多文章: 1-Flink入门 2-本地环境搭建&构建第一个Flink应用 3-DataSet API 4-DataSteam API 5-集群部署 6-分布式缓存 7-重启策略 8-Fli ...

  2. .Net Core的Log方式：Serilog+Kibana

    前言 Serilog,支持对象,把log数据序列化成Json,好用方便,容易拓展.Github: https://github.com/handsomeyao77/serilog-sinks-elas ...

  3. SmartUpload工具包的中文乱码问题详解

    关于SmartUpload工具包的中文乱码问题,输出在服务端的中文显示是乱码,而英文数字,没有任何问题,我在网上看了其他人的问题和回答,让我觉得有道理,却又用不着,最后在多次试验中,终于找到了问题所在 ...

  4. 学JAVA第十六 天，JAVA多态

    今天老师讲了多态的使用 多态是同一个行为具有多个不同表现形式或形态的能力. 多态的优点: 1. 消除类型之间的耦合关系 2. 可替换性  3. 可扩充性 4. 接口性 5. 灵活性 6. 简化性 我个 ...

  5. 从零讲解搭建一个NIO消息服务端

    本文首发于本博客,如需转载,请申明出处. 假设 假设你已经了解并实现过了一些OIO消息服务端,并对异步消息服务端更有兴趣,那么本文或许能带你更好的入门,并了解JDK部分源码的关系流程,正如题目所说,笔 ...

  6. CDN的简单理解

    百度百科上的解释:CDN的全称是Content Delivery Network,即内容分发网络.CDN是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡.内容分发.调 ...

  7. ArcGIS API for JavaScript 入门教程[7] 再讲视图——View的基本属性

    [回顾]上篇花大篇幅讲了ArcGIS Server上的数据服务与部分常用可操作图层的创建关系,还讲了OGC的几个规范. 本篇回到JsAPI 4.x的新特性——视图类中来. 在第3篇讲过,4.x将视图从 ...

  8. WebGL或OpenGL关于模型视图投影变换的设置技巧

    目录 1. 具体实例 2. 解决方案 1) Cube.html 2) Cube.js 3) 运行结果 3. 详细讲解 1) 模型变换 2) 视图变换 3) 投影变换 4) 模型视图投影矩阵 4. 存在 ...

  9. Vue2.0 --- vue-cli脚手架中全局引入JQ

    第一步:安装jQuery npm/cmpn方式安装(默认安装1.7.X版本的JQ) npm/cnpm install jQuery 如果想安装更高版本的JQ那么可以选择在package.json文件下 ...

  10. Linux-Redmine安装方法

    Linux-Redmine安装方法 QQ群交流:585499566 一.环境准备 1,Linux系统:centos6.5 2,Redmine安装包:bitnami-redmine-3.4.6-0-li ...