关于copy到剪切板的实现需要引用Clipboard.min.js

https://pan.baidu.com/s/1eStTJlo

页面如下所示,需要实现 点击copy字样 将id为content的内容复制到剪切板中的功能

<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">
Daily Reprot
</h4> <a id="btn" style="float:right;padding-right:15px" data-clipboard-action="copy" data-clipboard-target="#content">
<i style="font-size:small" class="glyphicon glyphicon-file"></i>
<span style="font-size:small">Copy</span>
</a>
</div>
<div id="content"class="modal-body"> </div>
</div>

在js中填加如下代码,并设置拷贝成功提示

var clipboard = new Clipboard('#btn');

        clipboard.on('success', function (e) {
layer.msg("Copy successfully,you can paste to email directly!");
console.log(e);
}); clipboard.on('error', function (e) {
console.log(e);
});

在IE中会提示 Allow Access 点击yes即可

Angular js 复制粘贴的更多相关文章

  1. 让微信内置浏览器兼容clipboard.js 复制粘贴 ios 安卓

    <!--js copy事件--><script type="text/javascript" src="/static/js/clipboard.min ...

  2. js 复制粘贴功能记录

    最近工作中需要在前端页面中使用代码完成剪贴板的读写,网上搜索了下相应的资料,记录下... 这个功能有两个办法一个是js方式,一个是使用flash 一.JS方法 1.复制 首先复制的过程分为两步曲,无论 ...

  3. 原生js复制粘贴上传图片前后台代码,兼容firebox,chrome, ie11,亲测有效

    需求:粘贴上传图片,截图工具,右键粘贴,或者ctrl+v粘贴 方法1:可直接套用富文本框的图片上传功能,完成复制粘贴 缺点:麻烦,样式难控制 方法2:用原生js完成,以下案例基于此,样式请自己动手调整 ...

  4. js复制粘贴事件

    一.相应的事件 copy: 在发生复制操作时触发. beforecut: 在发生剪切操作 前 触发. cut: 在 发生 剪切 操作 时 触发. beforepaste: 在 发生 粘贴 操作 前 触 ...

  5. JS复制粘贴效果

    话不多说.直接上代码 HTML: 1 <div> 2 老师入会密码:<input type="text" id="tPass"> < ...

  6. js复制粘贴模板

    <script> //绑定在了body上,也可以绑定在其他可用元素行,但是不是所有元素都支持copy和past事件. /* $(document.body).bind({ copy: fu ...

  7. js 复制粘贴

    input输入框<div id="top-title" style="position: relative"> <img class=&quo ...

  8. JS复制粘贴解决方案

    var clipboardData = window.clipboardData; //for IE if (!clipboardData) { // for chrome window.prompt ...

  9. ClipboardJS复制粘贴插件的使用

    1.简单的纯JS复制粘贴(兼容性差,只能用textarea标签) var btn=document.getElementsByClassName("btn")[0]; //复制按钮 ...

随机推荐

  1. Nginx反向代理实现负载均衡配置图解

    Nginx反向代理实现负载均衡配置图解 [导读] 负载均衡配置是超大型机器需要考虑的一些问题,同时也是数据安全的一种做法,下面我来介绍在nginx中反向代理 负载均衡配置图解,大家可参考本文章来操作. ...

  2. Lesson 6 The sporting spirit

    How does the writer describe sport at the international level? I am always amazed when I hear people ...

  3. P1090 危险品装箱

    1090 危险品装箱 (25分)   集装箱运输货物时,我们必须特别小心,不能把不相容的货物装在一只箱子里.比如氧化剂绝对不能跟易燃液体同箱,否则很容易造成爆炸. 本题给定一张不相容物品的清单,需要你 ...

  4. 定时执行 Job【转】

    Linux 中有 cron 程序定时执行任务,Kubernetes 的 CronJob 提供了类似的功能,可以定时执行 Job.CronJob 配置文件示例如下: ① batch/v2alpha1 是 ...

  5. Linux 只复制目录,不复制目录下数据文件

    [root@yoon u02]# mkdir yoon [root@yoon u02]# mkdir hank [root@yoon yoon]# mkdir -p 1/data [root@yoon ...

  6. Java常考面试题(二)(转)

    序言 昨天刚开始的"每日5题面试"这类文章,感觉还不错,把一些平常看似懂了的东西,弄清楚了.就像什么是虚拟机?这个问题,看起来知道,但是要说出个所以然来,又懵逼了,经常回过头来看看 ...

  7. xcode windows版安装使用教程

    随着iPhone.iPad.Mac等苹果产品越来越火爆,越来越多的初学者想要了解和尝试苹果平台,包括苹果操作系统Mac OS X.苹果演示软件Keynote.苹果开发工具Xcode等.然而,苹果电脑价 ...

  8. 单选与多选与label

    单选radio和多选checkbox是用name属性关联的 相同的name就相当于同一道题 <input type="radio" name="radio" ...

  9. PHP使用ElasticSearch做搜索

    PHP 使用 ElasticSearch 做搜索 https://blog.csdn.net/zhanghao143lina/article/details/80280321 https://www. ...

  10. react 如何引入打印控件 CLodop

    下载插件,官网地址 http://www.lodop.net/download.html  ,选择综合版,解压下载的文件.直接点击 安装,很简单,就不一一说明了. 复制下面几个文件,到react项目中 ...