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. 关于面试总结-python笔试题(递归)

    前言 本篇继续收集一些常见的python笔试题,以基础知识为主,递归是面试最喜欢考的一个问题,不管是做开发还是测试,都无法避免考递归.本篇结合实际案例,讲下几种关于递归的场景. 计算n的阶乘 计算n! ...

  2. ExtJS前端框架EXT弹出窗口事件

    https://blog.csdn.net/alsyuan/article/details/73240841 Ext.MessageBox.alert()Ext.MessageBox.alert()提 ...

  3. Vim pre-work

    1.先学会touch typing盲打是一切的基础 重点在于手眼协调 如果实现不了盲打.一切高效率的Vim操作都将无从做起 2.vim的使用 2.1.hjkl的移动 推荐练习贪吃蛇  和3D平衡球   ...

  4. 如何打开Oracle的dmp文件

    在工作中经常使用到别人提供过来的dmp文件,由于不知道备份时所用的用户名,这样就不能恢复. 通过打开DMP文件可以查看到备份时使用的用户名. 1.如果dmp文件比较小,用文本编辑器打开就可以了. 2. ...

  5. 出现 Assigning the return value of new by reference is deprecated in xxxx &&“Warning: Call-time pass-by-reference has been deprecated”怎么办?

    自从php5.3,越来越多的人会遇到“Assigning the return value of new by reference is deprecated in xxxx”这样的提示,尤其是在国外 ...

  6. mysql 修改管理员密码

    mysql 修改管理员密码 本次学习环境: windows 7系统.mysql 5.7.14. 一.如果是忘记了用户密码: (1).关闭正在运行的MySQL服务. 方法一:可以直接操作wamp软件,左 ...

  7. Java线程的5种状态及切换(透彻讲解)

    http://blog.csdn.net/pange1991/article/details/53860651

  8. Linux下建立虚拟内存

    查看目前虚拟内存状况 free -m -m表示以MB的单位显示 建立虚拟内存文件 先用df -h确认要放虚拟内存文件的位置,假设为 /data/swap/swap1 创建2G的虚拟内存并启用: dd ...

  9. 前端学习之--CSS

    CSS 常用帮助文档 CSS:被用来同时控制多重网页的样式和布局.HTML页面中CSS样式的写法有3种: 1:标签中写入 <body style='margin o auto;'> 2:h ...

  10. 2016 ACM/ICPC 区域赛(北京) E 题 bfs

    https://vjudge.net/problem/UVALive-7672 题意    输入一个五位数n 问由12345变到n的操作最少次数 不可达输出-1 有三种操作 1.交换相邻的位置 次数不 ...