Angular js 复制粘贴
关于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 复制粘贴的更多相关文章
- 让微信内置浏览器兼容clipboard.js 复制粘贴 ios 安卓
<!--js copy事件--><script type="text/javascript" src="/static/js/clipboard.min ...
- js 复制粘贴功能记录
最近工作中需要在前端页面中使用代码完成剪贴板的读写,网上搜索了下相应的资料,记录下... 这个功能有两个办法一个是js方式,一个是使用flash 一.JS方法 1.复制 首先复制的过程分为两步曲,无论 ...
- 原生js复制粘贴上传图片前后台代码,兼容firebox,chrome, ie11,亲测有效
需求:粘贴上传图片,截图工具,右键粘贴,或者ctrl+v粘贴 方法1:可直接套用富文本框的图片上传功能,完成复制粘贴 缺点:麻烦,样式难控制 方法2:用原生js完成,以下案例基于此,样式请自己动手调整 ...
- js复制粘贴事件
一.相应的事件 copy: 在发生复制操作时触发. beforecut: 在发生剪切操作 前 触发. cut: 在 发生 剪切 操作 时 触发. beforepaste: 在 发生 粘贴 操作 前 触 ...
- JS复制粘贴效果
话不多说.直接上代码 HTML: 1 <div> 2 老师入会密码:<input type="text" id="tPass"> < ...
- js复制粘贴模板
<script> //绑定在了body上,也可以绑定在其他可用元素行,但是不是所有元素都支持copy和past事件. /* $(document.body).bind({ copy: fu ...
- js 复制粘贴
input输入框<div id="top-title" style="position: relative"> <img class=&quo ...
- JS复制粘贴解决方案
var clipboardData = window.clipboardData; //for IE if (!clipboardData) { // for chrome window.prompt ...
- ClipboardJS复制粘贴插件的使用
1.简单的纯JS复制粘贴(兼容性差,只能用textarea标签) var btn=document.getElementsByClassName("btn")[0]; //复制按钮 ...
随机推荐
- 解决vmware 桥联 再次使用联不上网的问题
在vmare里 编辑 虚拟网络配置 桥联 自动设置 改为你正在联网的网卡 这个问题针对有线网卡 和无限网卡使用的问题
- html5和html4.0.1的<html>标记的区别
html5新增了一个 manifest属性,定义了缓存信息. html5中废弃了xmlns属性,这个属性在html转换成xhtml是非常有用的,但是html5中并不需要,因此不用写. 但是如果非要写那 ...
- leetcode322 Coin Change
""" You are given coins of different denominations and a total amount of money amount ...
- Docker + Maven + Docker-compose
前言: docker:容器化管理 maven:支持docker-maven的插件,通过 mvn clean -Dmaven.test.skip package dockerfile:build 打包命 ...
- hue中访问impala报错
hue中访问impala报错:Could not connect to node03:21050 原因:impala服务未启动. 解决方法:在3个节点上都启动impala: 主节点node03启动以下 ...
- Compile-kernel-module
Compile-kernel-module 1. 内核模块编程1.1 简介1.2 加载内核模块1.3 最简单的模块1.4 模块必要信息1.4.1 内核模块必须至少包含的头文件:1.4.2 内核模块必须 ...
- Day7 - D - The Euler function HDU - 2824
The Euler function phi is an important kind of function in number theory, (n) represents the amount ...
- ROS-1 : Ubuntu16.04中安装ROS Kinetic
1.安装 ROS Kinetic仅支持Wily(Ubuntu 15.10).Xenial( Ubuntu16.04)和Jessie(Debian 8)的debian软件包. 1.1 配置Ubuntu ...
- 十六、React 渲染数据注意事项、以及react-router4.x中使用js跳转路由(登录成功自动跳转首页)
一.React加载数据流程回顾 先看上一节的产品详情代码:https://blog.csdn.net/u010132177/article/details/103184176 [Pcontent.js ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-remove
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...