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. 【实验吧】转瞬即逝write up

    ---恢复内容开始--- 虽然这是很简单的一道题,但这是我第一次拿着题有很清晰的思路,并且脚本也有思路写,拿到文件用ida打开,分析main函数: int __cdecl main(int argc, ...

  2. 【HDU 5934】Bomb(强连通缩点)

    Problem Description There are N bombs needing exploding. Each bomb has three attributes: exploding r ...

  3. CSS3 pointer-events:none 让你摆脱事件的烦恼

    以前没遇到这个属性,在一个偶然的博文下发现该属性真的好用,你是否遇到过写鼠标移入显示文本的效果时,鼠标在元素内的每一次移动都会造成要显示文本的闪烁或是突然的消失?只要在被控制的元素中加上这个属性完美解 ...

  4. IDEA将Maven项目中src源代码下的xml配置文件编译进classes

    遇到这样的情况,maven项目启动报错,src中某个包下面的xml文件找不到. eclipse编译项目会自动将xml配置文件编译进classes,IDEA却不行 在报错项目的pom.xml文件中添加: ...

  5. CDOJ 1225 Game Rooms

    Game Rooms Time Limit: 4000/4000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Your ...

  6. 【HTML/XML 4】实例分析HTML和XML的不同

    导读:上回书说到,XML和HTML有着各自的不同点,综合表现在:1,HTML只是Web显示数据的通用方法,而XML提供了直接处理Web数据的通用方法.2,HTML着重描述Web页面的显示格式,而XML ...

  7. hexo干货系列:(五)hexo添加站内搜索

    前言 本来想用百度站内搜索,但是没成功,所以改用swiftype,用起来还是很棒的,这里分享一下我的安装步骤 正文 注册 去swiftype官网注册个账号,然后登陆,对了不要去在意30天试用,30天过 ...

  8. BZOJ1573: [Usaco2009 Open]牛绣花cowemb

    求半径d<=50000的圆(不含边界)内n<=50000条直线有多少交点,给直线的解析式. 一开始就想,如果能求出直线交点与原点距离<d的条件,那么从中不重复地筛选即可.然而两个kx ...

  9. php桥接模式

    php桥接模式 桥接模式是将抽象部分与它的实现部分分离,使它们都可以独立地变化. 示例:当一个信息时根据发送渠道分为:QQ消息.email消息.短信消息等根据消息类型分为:普通.警告.危急等每种消息都 ...

  10. XCode warning:“View Controller” is unreachable because it has no entry points

    Unsupported Configuration: “View Controller” is unreachable because it has no entry points, and no i ...