javaScript复制粘贴
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})} /> <CopyToClipboard text={this.state.value}
onCopy={() => this.setState({copied: true})}>
<span>Copy to clipboard with span</span>
</CopyToClipboard> <CopyToClipboard text={this.state.value}
onCopy={() => this.setState({copied: true})}>
<button>Copy to clipboard with button</button>
</CopyToClipboard> {this.state.copied ? <span style={{color: 'red'}}>Copied.</span> : null}
</div>
);
}
}); React.render(<App />, document.body);
javaScript复制粘贴的更多相关文章
- 前端 JavaScript 复制粘贴的奥义——Clipboard 对象概述
前言 作为一名资深搬砖工,你要问我用得最熟练的技能是什么,那我敢肯定且自豪的告诉你:是 Ctrl+C !是 Ctrl+V! 不信?你来看看我键盘上的 Ctrl.C 和 V 键,那油光发亮的包浆程度,不 ...
- javascript 复制粘贴操作
function CopyCode(key){ var trElements = document.all.tags("tr");//获取tr元素 var i; for(i = 0 ...
- Javascript禁止网页复制粘贴效果,或者复制时自动添加来源信息
一.禁止复制 使用方法:在oncopy事件中return false oncopy="return false;" 1.禁止复制网页内容 <body oncopy=" ...
- ZeroClipboard跨浏览器复制粘贴
<!DOCTYPE html> <html> <head> <title>ZeroClipboard跨浏览器复制粘贴</title> < ...
- js 实现复制粘贴文本过滤(保留文字和图片)
实现复制粘贴文本过滤(保留文字和图片) demo如下: <head> <meta http-equiv="Content-Type" content=" ...
- 通过如何通过js实现复制粘贴功能
在ie中window.clipboardData(剪切板对象)是可以被获取,所以利用这个方法我们可以实现在IE当中复制粘贴的功能,demo如下! <html> <head> & ...
- 同时绑定onpropertychange 和 oninput 事件,实时检测 input、textarea输入改变事件,支持低版本IE,支持复制粘贴
实时检测 input.textarea输入改变事件,支持低版本IE,支持复制粘贴 检测input.textarea输入改变事件有以下几种: 1.onkeyup/onkeydown 捕获用户键盘输入事件 ...
- 让微信内置浏览器兼容clipboard.js 复制粘贴 ios 安卓
<!--js copy事件--><script type="text/javascript" src="/static/js/clipboard.min ...
- 用javascript复制富文本
由于项目需求,希望能够用javascript复制富文本格式的数据,例如全选一个网页Ctrl+C, Ctrl+V到一个word文档中,数据还是原来的格式,显示出来的样子也都和原来一样.现在希望使用jav ...
随机推荐
- xtu summer individual 1 E - Palindromic Numbers
E - Palindromic Numbers Time Limit:2000MS Memory Limit:32768KB 64bit IO Format:%lld & %l ...
- 线性回归Linear regression
线性回归算法 解决回归问题 思想简单,容易实现 是许多强大的非线性模型的基础 结果具有很好的可解释性 蕴含机器学习中的很多重要思想 基本思想:寻找一条直线,最大程度的“拟合”样本特征和样本输出标记之间 ...
- jvm参数设置 -vmargs -Xms128M -Xmx512M -XX:PermSize=64M -XX:MaxPermSize=128M
-vmargs -Xms128M -Xmx512M -XX:PermSize=64M -XX:MaxPermSize=128M 这里有几个问题: 1. 各个参数的含义什么? 2. 为什么有的机器我将- ...
- HDU 6070 (线段树)(统计颜色)
HDU 6070 Partition Problem : 给一段长度为n的序列,要求找出一段区间,使得这段区间的数字种类除以区间长度最小.输出最后的答案即可.(n <= 60000)(9s时限) ...
- HDU 3609 二分图多重匹配
Escape Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Subm ...
- 2017-10-04-afternoon
注意完全平方数统计时的特判 #include <cstdio> inline void read(int &x) { x=; register char ch=getchar(); ...
- MySql基本数据类型(转)
说明:通俗的理解:1字节的8位,即1byte=8bit,而这个1byte叫做长度范围,范围的算法是使用bit去求,比如8bit的长度范围是2的8次方,但是在数据库中的类型上是有区分有符号和无符号的,默 ...
- "What's New" WebPart in SharePoint
"What's New" WebPart in SharePoint 项目描写叙述 这是一个自己定义WebPart,能够显示一个列表,这个列表项目是在SharePo ...
- 【c++】【转】结构体字节对齐
http://www.cnblogs.com/heyonggang/archive/2012/12/11/2812304.html
- Android 自己定义UI文章汇总
<Android ListView分类/分组效果 - 第一种实现方式> <Android ListView分类/分组效果 - 另外一种实现方式> <Android Lis ...