1.clipboard.js 实现了纯 JavaScript (无 Flash)的浏览器内容复制到系统剪贴板的功能。可以在浏览器和 Node 环境中使用。支持 Chrome 42+、Firefox 41+、IE 9+、Opera 29+

cdn:<script src="https://cdn.bootcss.com/clipboard.js/1.6.1/clipboard.min.js"></script>

用法:

<script src="clipboard.min.js"></script>
<textarea id="bar" cols="" rows="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">脚本之家是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。</textarea> <!-- Trigger -->
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#bar">
Cut to clipboard
</button>
<script>
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
alert("复制成功");
e.clearSelection();
}); clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
</script>

2.react-copy-to-clipboard

安装:npm install --save react-copy-to-clipboard

用法:

import React from 'react';
import CopyToClipboard from 'react-copy-to-clipboard'; const App = React.createClass({
getInitialState() {
return {value: '', copied: false};
}, render() {
return (
<div>
<input value={this.state.value}
onChange={({target: {value}}) => this.setState({value, copied: false})} />&nbsp; <CopyToClipboard text={this.state.value}
onCopy={() => this.setState({copied: true})}>
<span>Copy to clipboard with span</span>
</CopyToClipboard>&nbsp; <CopyToClipboard text={this.state.value}
onCopy={() => this.setState({copied: true})}>
<button>Copy to clipboard with button</button>
</CopyToClipboard>&nbsp; {this.state.copied ? <span style={{color: 'red'}}>Copied.</span> : null}
</div>
);
}
}); React.render(<App />, document.body);

javaScript复制粘贴的更多相关文章

  1. 前端 JavaScript 复制粘贴的奥义——Clipboard 对象概述

    前言 作为一名资深搬砖工,你要问我用得最熟练的技能是什么,那我敢肯定且自豪的告诉你:是 Ctrl+C !是 Ctrl+V! 不信?你来看看我键盘上的 Ctrl.C 和 V 键,那油光发亮的包浆程度,不 ...

  2. javascript 复制粘贴操作

    function CopyCode(key){ var trElements = document.all.tags("tr");//获取tr元素 var i; for(i = 0 ...

  3. Javascript禁止网页复制粘贴效果,或者复制时自动添加来源信息

    一.禁止复制 使用方法:在oncopy事件中return false oncopy="return false;" 1.禁止复制网页内容 <body oncopy=" ...

  4. ZeroClipboard跨浏览器复制粘贴

    <!DOCTYPE html> <html> <head> <title>ZeroClipboard跨浏览器复制粘贴</title> < ...

  5. js 实现复制粘贴文本过滤(保留文字和图片)

    实现复制粘贴文本过滤(保留文字和图片) demo如下: <head> <meta http-equiv="Content-Type" content=" ...

  6. 通过如何通过js实现复制粘贴功能

    在ie中window.clipboardData(剪切板对象)是可以被获取,所以利用这个方法我们可以实现在IE当中复制粘贴的功能,demo如下! <html> <head> & ...

  7. 同时绑定onpropertychange 和 oninput 事件,实时检测 input、textarea输入改变事件,支持低版本IE,支持复制粘贴

    实时检测 input.textarea输入改变事件,支持低版本IE,支持复制粘贴 检测input.textarea输入改变事件有以下几种: 1.onkeyup/onkeydown 捕获用户键盘输入事件 ...

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

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

  9. 用javascript复制富文本

    由于项目需求,希望能够用javascript复制富文本格式的数据,例如全选一个网页Ctrl+C, Ctrl+V到一个word文档中,数据还是原来的格式,显示出来的样子也都和原来一样.现在希望使用jav ...

随机推荐

  1. HDU 1166 排兵布阵(线段树单点更新)

    题意: 给定n个兵营的士兵初始值, 然后有最多40000个操作: 操作一共有两种, 一个是查询给定[a,b]区间兵营的士兵总和. 另一个是增加/减少指定兵营的士兵数目. 输出每次查询的值. 分析: 线 ...

  2. ASP.NET MVC______VS2012

    1,在VS2010中,选中指定的代码段,可以拖拽到工具箱中,形成标签,以后还想书写类似的代码,双击鼠标即可. 2,在VS2012中,可以在注释上标注//TODO:我是注释 这样,注释就会出现在任务列表 ...

  3. Spring拓展接口之BeanPostProcessor,我们来看看它的底层实现

    前言 开心一刻 小明:“妈,我被公司开除了”,妈:“啊,为什么呀?”, 小明:“我骂董事长是笨蛋,公司召开高层会议还要起诉我”,妈:“告你诽谤是吧?”,小明:“不是,他们说要告我泄露公司机密” Bea ...

  4. 洛谷 P1434 [SHOI2002]滑雪

    这道题适合记忆化练手 毕竟总有些大佬虐题. 这个题有几个剪枝 1.记忆化 这个不用多说了吧 剪枝就是 如果 当前点到下面一个点的目前下降的高度+1 小于 下面那个点 能下降的高度 那么反过来,这个点不 ...

  5. 洛谷 P1156 垃圾陷阱 谈论剪枝,非满分

    这是一个91分的非dp代码(是我太弱) 剪枝八五个(实际上根本没那么多,主要是上课装逼,没想到他们dp水过去了),不过我的思路与dp不同: 1.层数到达i+1,return 这个必须有 2.当前剩余生 ...

  6. Java基础学习总结(92)——Java编码规范之排版、注释及命名

    为使开发人员养成良好的开发习惯,编写可读性强.易维护的程序,结合以往资料,现整理Java编码规范,将之作为开发人员的参照依据. 一.排版 1.相对独立的程序块之间必须加空行 下列情况应该使用一个空行: ...

  7. sqlserver复制表数据到另一个表

    SQL Server中,如果目标表存在: insert into 目标表 select * from 原表; SQL Server中,,如果目标表不存在: select * into 目标表 from ...

  8. 【三分+精度问题】G. Toxophily

    https://www.bnuoj.com/v3/contest_show.php?cid=9154#problem/G [题意] 已知人的坐标在(0,0),靶的位置在(x,y),人以速度v射箭并且射 ...

  9. 找了两个小时的错误,net.sf.json.JSONException: JSON keys cannot be null.

    因为数据库里面一条记录插入的是NULL,所以导致报了net.sf.json.JSONException: JSON keys cannot be null,找了半天都找不出来问题所在,其他人又都可以启 ...

  10. POJ 2488 A Knight's Journey【DFS】

    补个很久之前的题解.... 题目链接: http://poj.org/problem?id=2488 题意: 马走"日"字,让你为他设计一条道路,走遍所有格,并输出字典序最小的一条 ...