JQery插件clipboard.js ----将文本复制到剪贴板的现代化方法
###
之前用了js自带的剪贴板对象clipboardData 对象以为就可以实现粘贴复制,但是种只支持IE的。
就找了jq的一个插件Zclip,但是网上的说法是利用了flesh来实现的,我用了之后可以实现,但是面对我自啊table的td中存在多个要实现粘贴复制的话,就会有问题了。
所以,才找了现在这个jqery的另一个插件,相对更好些,能够支持移动端的
###
实现起来也很简单,
我就弄个例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>target-input</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- 1. Define some markup -->
<input id="foo" type="text" value="hello">
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button> <!-- 2. Include library -->
<script src="../dist/clipboard.min.js"></script> <!-- 3. Instantiate clipboard -->
<script>
var clipboard = new Clipboard('.btn'); clipboard.on('success', function(e) {
console.log(e);
}); clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>
JQery插件clipboard.js ----将文本复制到剪贴板的现代化方法的更多相关文章
- JS实现文本复制与剪切
我们在网页上放置一个复制按钮,主要用来方便用户复制链接之类的复杂文本,以往的做法是,通过JS依靠Flash,甚至借助jQuery庞大的js库来实现文本复制到剪贴板的.今天我要给大家介绍的是一款极现代的 ...
- js 将内容复制到剪贴板
js 将内容复制到剪贴板 CreationTime--2018年7月1日15点06分 Author:Marydon function copyToClipboard(txt) { if(windo ...
- clipboard.js -- js实现将文本复制到剪贴板的方法
资源 推荐使用:clipboard.js 官方教程地址:https://clipboardjs.com/#example-text 官方github地址:https://github.com/zeno ...
- ZeroClipboard 插件实现文本复制到剪贴板
ZeroClipboard 的官网 点这里,github地址 点这里. 事例如下: 在引入 ZeroClipboard.js 之后, <button id="clip_button&q ...
- js将内容复制到剪贴板
有一需求,点击按钮要将某个值复制到剪贴板. 第一种,代码如下: <div cols="20" id="biao1">12345678</div ...
- 一款给力的一键复制js插件-clipboard.js
一款没有依赖的.给力的一键复制的JS插件 点我前往github 案例demo见下载包内demo文件夹. 这里晒出最常用的几种方式,以供不时之需. <!DOCTYPE html> < ...
- vue中使用剪切板插件 clipboard.js
vue中使用剪切板需要借助一个插件,clipboard,使用方法还是很简单的,先下载,然后引入: npm i clipboard -S //引入 import Clipboard from 'clip ...
- 怎样使用js将文本复制到系统粘贴板中
需要使用到三个document方法: 1. document.execCommand(); 执行某个命令 2. document.queryCommandSupported(); 检测浏览器是否支持某 ...
- js/jQuery实现复制到剪贴板功能,兼容所有浏览器
因为工作的原因,需要实现这样一个功能:点击按钮,复制文本内容. 百度了一下,大都语焉不详,最终找到了一篇很好的博文,有讲解,有实例,捣鼓了一会,最终实现了功能. 网址在这里http://www.cnb ...
随机推荐
- window跟vue变量互相绑定
js实现变量监听 //定义一个对象,挂载到window下,后续在任何模块中,给这个对象的show属性赋值,都将触发set对应的代码,我这么写主要是为了解决vue子组件向父组件传值的问题 window. ...
- SpringBoot 2.0集成spring-data-elasticsearch
1 资料 https://segmentfault.com/a/1190000015568618 https://github.com/JeffLi1993/springboot-learning-e ...
- IIS Express URL Rewrite无效
点击一下项目,再选择属性选项卡(不是右键属性) 如上图,如果托管管道模式是集成的话,改为经典即可.如果在vs2010的 WebDev.WebServer40方式启动 默认就是经典模式
- C#水晶报表教程
http://apps.hi.baidu.com/share/detail/24298108 水晶报表是一个功能强大的报表工具,现在已经被Microsoft Visual Studio 2005(下文 ...
- git 出现 fatal: refusing to merge unrelated histories 错误
git pull 失败 ,提示:fatal: refusing to merge unrelated histories 其实这个问题是因为 两个 根本不相干的 git 库, 一个是本地库, 一个是远 ...
- CMD之入门篇
本博文最早是记录在本地电脑的,由于清理电脑的缘故,顺便将这篇笔记转移到公共博客,以便日后查阅和快速上手使用. 开门见山,步入正题,以下是Windows系统的常用CMD命令. 一 文件系统操作 0.[脚 ...
- flash 概要分析器
这个东东 调试用.会每毫秒一次记录正在运行的函数 及相关数据 只在调试版flash player才能用. startSampling 开始记录 getSamples 获取记录 Sample ...
- 2017CCPC秦皇岛 G题Numbers&&ZOJ3987【大数】
题意: 给出一个数n,现在要将它分为m个数,这m个数相加起来必须等于n,并且要使得这m个数的或值最小. 思路: 从二进制的角度分析,如果这m个数中有一个数某一位为1,那么最后或起来这一位肯定是为1的, ...
- HashMap 底层分析
以下基于 JDK1.7 分析 如图所示,HashMap底层是基于数组和链表实现的,其中有两个重要的参数: ---容量 ---负载因子 容量的默认大小是16,负载因子是0.75,当HashMap的siz ...
- ES6 基础
转载自:ES6 基础 一.新的变量声明方式 let/const 与var不同,新的变量声明方式带来了一些不一样的特性,其中最重要的两个特性就是提供了块级作用域与不再具备变量提升. 通过2个简单的例子来 ...