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

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

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

官方网站:https://github.com/zenorocha/clipboard.js

软件下载:http://www.jb51.net/jiaoben/385604.html

官方使用方法:https://zenorocha.github.io/clipboard.js/#example-text

示例代码:

官方实例一:
在线演示:http://demo.jb51.net/js/2015/clipboard/

<script src="clipboard.min.js"></script>
 <textarea id="bar" cols="62" rows="5" 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>

官方实例二:

<script src="dist/clipboard.min.js"></script>
<button class="btn">
<script type="text/javascript">
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);

  e.clearSelection();
});

clipboard.on('error', function(e) {
  console.error('Action:', e.action);
  console.error('Trigger:', e.trigger);
});
</script>
时间: 2015-09-29

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

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

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

摘要: 最近做了一个项目,其中有这样一需求:实现一个点击按钮复制链接的功能,通过网上找相关资料,找到了几个插件,ZeroClipboard是通过flash实现的复制功能,随着越来越多的提议废除flash,于是就想能不能通过js来实现复制剪切呢? 地址:https://github.com/baixuexiyang/clipBoard.js 方法: 复制 var copy = new clipBoard(document.getElementById('data'), { beforeCopy:

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实现复制功能的示例代码

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

JS中跳出循环的示例代码

1.for循环中我们使用continue:终止本次循环计入下一个循环,使用break终止整个循环. 2.而在jquery中 $.each使用return true 终止本次循环计入下一个循环,return false终止整个循环.  函数返回值跟此处无关 例: $.extend($.fn.datagrid.methods, { isChecked: function (dg, param) { var flag = false;//是否选中 var allRows = $(dg).datagri

使用Dropzone.js上传的示例代码

本文介绍了使用Dropzone.js上传的示例代码,分享给大家,具体如下: 说明:后台用的python的flask框架,后台对你理解这篇文章没什么影响,你可以使用php form作为上传区 引入Dropzone.js和dropzone.css然后使用表单form定义一个class="dropzone"即可完成 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l

vue.js实现表格合并示例代码

前言 由于使用的是vue,想到MVVM是要用数据驱动的思想,所以考虑在Model做手脚,而不是渲染出数据来后做DOM操作,当然基本的CSS还是要有的.因此这个方法对所有数据驱动的框架都有效,比如说Angular和React. 最后的实现效果是这样的: 实现思路 原本的正常表格的代码长这样: <tr v-for="item in items"> <td width="3%">{{ $index + 1 }}</td> <td

js滚动条平滑移动示例代码

本文实例为大家分享了js滚动条平滑移动相关代码,供大家参考,具体内容如下 html页 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="../Scripts/JavaScrip

非html5实现js版弹球游戏示例代码

开始前的html页面  开始后的html游戏界面  html页面布局,即index.html文件源码如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" co

使用非html5实现js板连连看游戏示例代码

向大家分享一款如何实现js版连连看游戏,如下图所示: 首先看一下html的布局方式在index.html文件中: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http

在 Angular 中使用Chart.js 和 ng2-charts的示例代码

Chart.js是一个流行的JavaScript图表库,ng2图表是Angular 2+的包装器,可以轻松地将Chart.js集成到Angular中. 我们来看看基本用法. 安装 首先,在项目中安装 Chart.js 和 ng2-charts: # Yarn: $ yarn add ng2-charts chart.js # or npm $ npm install ng2-charts charts.js --save 当然 ,如果你是使用Angular CLI构建的项目,你也可以很容易的添加

ASP.NET SignaiR 实现消息的即时推送,并使用Push.js实现通知的示例代码

一.使用背景 1. SignalR是什么? ASP.NET SignalR 是为 ASP.NET 开发人员提供的一个库,可以简化开发人员将实时 Web 功能添加到应用程序的过程.实时 Web 功能是指这样一种功能:当所连接的客户端变得可用时服务器代码可以立即向其推送内容,而不是让服务器等待客户端请求新的数据. 2.Push.js是什么?[需要浏览器支持H5Notifications] Notifications翻译过来即是通知.那么Push.js的通知又是什么样的,见下图:大多数在屏幕的右下角出

Jquery操作js数组及对象示例代码

贴一段jQuery对js对象及数组的操作:增删改查的代码. 复制代码 代码如下: var WorkList = new Array();//数组对象 //下面是自己定义的实体 function WorkEx(depart, title, begintime, endtime) {     this.SId = 0;     this.Id = -(WorkList.length+1);     this.DepartmentName = depart;     this.Title = titl