关于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. Windows 10长脸了!

    Windows 10一直毁誉参半,但是在微软的持续升级完善之下,同时随着时间的流逝,已经顺利成为全球第一大桌面操作系统,并开始逐渐甩开Windows 7,全球设备安装量已经达到约8亿部. 根据最新的S ...

  2. 选择本地文件上传控件 input标签

    当要通过控件来选择本地文件上传的时候的一种方式 <input type="file" id="input-file"/> 注意 type类型一定要是 ...

  3. Noip2018普及组初赛试题解题报告

    解题思路: 一.单项选择题 (答案:DDDBBAAAABABBBB) 1.除D外,其余均为输入设备. 2.除D外,其余都等于(617)10 ,D选项为(619)10. 3.1MB=1024KB=102 ...

  4. 利用 Ruoyi 开发自己的业务管理系统__测试结构完成

    前言铺垫不多说 (1)Ruoyi这个平台不错:如果你觉得你比Ruoyi的作者牛逼,你就不用看我这个文章了,你可以走了,因为我自认为比Ruoyi的作者要烂: (2)必须已经成功搭建Ruoyi,并能在自己 ...

  5. Java连载68-数组的拷贝、二维数组

    一.数组的拷贝 函数arraycopy(),参数为:源数组.源数组的开始下标.目标数组.目标数组的开始下标.拷贝长度 package com.bjpowernode.java_learning; ​ ...

  6. angularJS MVC及$scope作用域

  7. 提升Essay写作说服力,需要注意这几个细节

    很多留学生对于essay写作都不精通,能够勉强通过就不错了.那么Essay写作到底该怎么提分呢?可以从哪些方面入手?小编给同学们指几条路,相信可以帮到大家. 在有说服力的Essay中总结您的论点.尽管 ...

  8. Django(九)模型:dj查询数据库的函数(方法)

    一.查询函数 通过模型类.objects属性可以调用如下函数,实现对模型类对应的数据表的查询. 函数表 函数名 功能 返回值 说明 get 返回表中满足条件的一条且只能有一条数据. 返回值是一个模型类 ...

  9. 吴裕雄--天生自然java开发常用类库学习笔记:多对多关系范例

    import java.util.List ; import java.util.ArrayList ; public class Course{ private String name ; priv ...

  10. Window Server 2019 配置篇(3)- 建立hyper-v集群并在其上运行win10 pro虚拟机

    上次讲到我们的域里有了网关跟DHCP,这次我们要在域中建立hyper-v集群并在其上运行win10 pro虚拟机 那么什么是hyper-v集群呢? 就是两个及两个以上的运行hyper-v服务的服务器建 ...