JS基于clipBoard.js插件实现剪切、复制、粘贴

摘要:

最近做了一个项目,其中有这样一需求:实现一个点击按钮复制链接的功能,通过网上找相关资料,找到了几个插件,ZeroClipboard是通过flash实现的复制功能,随着越来越多的提议废除flash,于是就想能不能通过js来实现复制剪切呢?

地址:https://github.com/baixuexiyang/clipBoard.js

方法:

复制

var copy = new clipBoard(document.getElementById('data'), {
beforeCopy: function() {
},
copy: function() {
return document.getElementById('data').value;
},
afterCopy: function() {
}
}); 

剪切

var cut = new clipBoard(document.getElementById('data'), {
beforeCut: function() {
},
Cut: function() {
return document.getElementById('data').value;
},
afterCut: function() {
}
});

粘贴

var paste = new clipBoard(document.getElementById('data'), {
beforePaste: function() {
},
paste: function() {
return document.getElementById('data').value;
},
afterPaste: function() {
}
});
时间: 2016-05-02

Clipboard.js 无需Flash的JavaScript复制粘贴库

clipboard.js 实现了纯 JavaScript (无 Flash)的浏览器内容复制到系统剪贴板的功能.可以在浏览器和 Node 环境中使用.支持 Chrome 42+.Firefox 41+.IE 9+.Opera 29+ 官方网站:https://github.com/zenorocha/clipboard.js 软件下载:http://www.jb51.net/jiaoben/385604.html 官方使用方法:https://zenorocha.github.io/clipbo

使用clipboard.js实现复制功能的示例代码

最近在工作中有一个需求,就是需要使用一个按钮实现相应内容的复制.在网上找了很多解决方案,最后对比之下选择了clipboard.js插件来进行实现.因为它不依靠flash以及其他框架,而且体积小使用简单兼容性也好.下面简单介绍一下它的用法. 引入插件,可以下载,也可以使用第三方cdn. <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></sc

ZeroClipboard.js使用一个flash复制多个文本框

ZeroClipboard.js是一个支持复制和粘贴的JavaScript插件,目前官方已经到2.x的版本了,但不支持IE9以下的浏览器,而如果要兼容,则可以使用1.x的版本,我使用的是最开始的一个版本:1.0.7的.该版本支持IE7和IE8,今天主要介绍如何使用一个flash支持多个复制文本. 一般我们需要复制一个地方的时候,大多都使用下面这个代码新建一个对象: <div id="J_pop_share"> <input id="J_video_ifram

clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切

我们在网页上放置一个复制按钮,主要用来方便用户复制链接之类的复杂文本,以往的做法是,通过JS依靠Flash,甚至借助jQuery庞大的js库来实现文本复制到剪贴板的.今天我要给大家介绍的是一款极现代的,不需要flash,不依赖任何其他js库的非常小的插件,它叫clipboard.js. 运行效果图: HTML 首先加载本地clipboard.js文件. <script src="clipboard.min.js"></script> 然后就是在body中加上要复

不依赖Flash和任何JS库实现文本复制与剪切附源码下载

效果图如下: 我们在网页上放置一个复制按钮,主要用来方便用户复制链接之类的复杂文本,以往的做法是,通过JS依靠Flash,甚至借助jQuery庞大的js库来实现文本复制到剪贴板的.今天我要给大家介绍的是一款极现代的,不需要flash,不依赖任何其他js库的非常小的插件,它叫clipboard.js. 查看演示 下载源码 HTML 首先加载本地clipboard.js文件. 复制代码 代码如下: <script src="clipboard.min.js"></scri

基于js与flash实现的网站flv视频播放插件代码

本文实例讲述了基于js与flash实现的网站flv视频播放插件代码.分享给大家供大家参考. 具体实现代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1

JS统计Flash被网友点击过的代码

JS怎样知道Flash广告条被网友点击过? 1.Flash广告条不是我做的,它的链接是写在里面的. 2.我想统计这个Flash被网友点击了多少次.它由三个JS组成,它是一个广告联盟网站,统计FLASH被点击的应用,可是我不会修改成我的应用,请大家帮看看,谢谢,我的点击统计是 count.asp 请问怎样写一个JS可以进行统计,谢谢 1.js -------------------------------- var ed_ads_Furl=top.window.location; var ed_a

JS实现FLASH幻灯片图片切换效果的方法

本文实例讲述了JS实现FLASH幻灯片图片切换效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh

javascript文件中引用依赖的js文件的方法

在一个js文件中如果需要引入另外所依赖的js文件,只需要在第一个js文件中导入如下代码即可: 复制代码 代码如下: var s=document.createElement("script"); s.src="/script/Map.js"; document.getElementsByTagName( "HEAD")[0].appendChild(s); 其中红色部分为所依赖的js文件的路径.

效果直逼flash的Div+Css+Js菜单

效果直逼flash的Div+Css+Js菜单 css菜单 body{ background-color:#B8B8A0; } #fbtn{ display:none; overflow:hidden; border-style:solid; border-width:1px; border-color:#e1e1c9 #e1e1c9 #6e6e56 #6e6e56; padding:1 1 1 1; width:115px; height:30px; } #fbtn_txt{ position:

js与flash的交互FLASH连播控制器

该实例主要实现了js与flash的交互,运行前提是浏览器安装了flash插件! 前段时间领导提出的一个问题:能否实现多个flash的连续播放? 查了相关资料并通过自己的努力,最终实现了如下一个简单的Flash连续播放的js脚本. 该功能的实现实际上相当简单,主要是要了解js对flash控制的接口函数,知道了这些,问题的难度马上就降到了1+1=?的级别. 复制代码 代码如下: var flashs=[    "http://60.210.98.23/theater/flash/2007-07/14

require.js 加载 vue组件 r.js 合并压缩的实例

准备: vue.js 原本是学习vue组件 require.js 然后想到用require 加载 r.js 文件太多 合并 文件目录 忽略部分文件及文件夹 一.先说vue 组件 先引入vue 再引入vue组件 Vue.extend({}) 定义组件 template data methods Vue.component(),注册组件的标签,标签在html中是一个挂载点 new Vue() 进行实例化 index.html // css引入 略 <div id="header"&g

JS基于面向对象实现的拖拽库实例

本文实例讲述了JS基于面向对象实现的拖拽库.分享给大家供大家参考.具体如下: 这是一个面向对象的JS拖拽库,可设置水平锁定.垂直锁定.锁定位置.锁定范围等,设定这些范围后,只能在设定的模式下拖动,我觉得这是个挺不错的拖拽实例. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mxdx-draw-plug-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi