<!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. WebPack引用Bootstrap 无法使用图标的结局方案

    npm i https://github.com/iconic/open-iconic.git -D  因为boostrap的css里删除了图标 分开了 我们在引入个呵呵. 下载:npm i boot ...

  2. java~springboot~ibatis Invalid bound statement (not found)原因

    事实起因 最近在ORM上使用了ibatis,感觉挺繁琐的,没有jpa来的直接,但项目非要用也没有办法,最近在进行开发过程中出现了一个问题Invalid bound statement (not fou ...

  3. cocos creator主程入门教程（十一）—— 有限状态机和行为树

    五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以TypeScript为介绍语言. 本篇介绍有限状态机和行为树.有限状态机用于有限的状态下的AI,由于同时只能处于一个状态,多个状态需要多个 ...

  4. Redis在Windows中安装方法

    首先下载Redis 下载地址:https://github.com/MSOpenTech/redis/releases Redis支持32位和64位,这个需要根据你系统平台的实际情况选择,我的是64位 ...

  5. 2016年第七届蓝桥杯javaB组 试题 答案 解析

    1.煤球数目 有一堆煤球,堆成三角棱锥形.具体: 第一层放1个, 第二层3个(排列成三角形), 第三层6个(排列成三角形), 第四层10个(排列成三角形), .... 如果一共有100层,共有多少个煤 ...

  6. Nginx支持 React browser router

    修改nginx配置文件,添加try_file配置如下,即可实现对 React browser router 的支持. location / { root /var/www/mysite; try_fi ...

  7. 44.Odoo产品分析 (五) – 定制板块(1) – 管理odoo安装(1)

    查看Odoo产品分析系列--目录 1 管理员的注意事项 在记录重要的配置细节时必须要小心,而且必须要有一个连续性的合适的.让系统能够安装备份并运行在一个可接受的时间内的计划. 1.1 制定实施策略 如 ...

  8. C# 利用位运算传递多个参数方法

    前言 在工作中用sendMessage的方法向另外一个进程中传递窗体的位置,长度,宽度四个值,但是sendMessage的方法签名中只有两个参数.于是在网上找到了一些代码,找到了这个利用位运算来合并参 ...

  9. 【English】五、颜色相关

    一.常见颜色 黑色    black    白色    white    蓝色    blue    橙色    orange    黄色    yellow        灰色    gray   ...

  10. TTL与非门电路分析

    TTL与非门(TTL推挽式与非门)是TTL集成逻辑门的一种,主要由三极管和二极管构成.如图(a)所示,它由输入级,中间级,输出级三部分组成.TTL与非门的优点在于输出阻抗低,带负载能力强,工作速度快. ...