clipboard.js -- js实现将文本复制到剪贴板的方法
资源
推荐使用:clipboard.js
官方教程地址:https://clipboardjs.com/#example-text
官方github地址:https://github.com/zenorocha/clipboard.js/
基本用法解答
1、data-clipboard-target 在触发器元素中添加属性来实现
new ClipboardJS('.btn') <input id="foo" value="我是被copy的值"> <button class="btn" data-clipboard-target="#foo"></button>
2、data-clipboard-action属性以指定是要copy还是cut内容
new ClipboardJS('.btn') <textarea id="bar">我是被copy或者cut的内容</textarea> <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar"></button>
3、data-clipboard-text在触发器元素中包含一个属性
new ClipboardJS('.btn') <button class="btn" data-clipboard-text="我是被copy的值"></button>
4、在bootstrap模态框modal里使用clipboard.js时复制失效
new Clipboard('.btn', {
container: document.getElementById('modal') //html所在模态框ID
});
5、更多高级用法请参考官方文档:https://clipboardjs.com/#example-text
clipboard.js -- js实现将文本复制到剪贴板的方法的更多相关文章
- JQery插件clipboard.js ----将文本复制到剪贴板的现代化方法
### 之前用了js自带的剪贴板对象clipboardData 对象以为就可以实现粘贴复制,但是种只支持IE的. 就找了jq的一个插件Zclip,但是网上的说法是利用了flesh来实现的,我用了之后可 ...
- js实现各种复制到剪贴板的方法
一.实现点击按钮,复制文本框中的的内容 <script type="text/javascript"> function copyUrl2() { var Url2=d ...
- ZeroClipboard 插件实现文本复制到剪贴板
ZeroClipboard 的官网 点这里,github地址 点这里. 事例如下: 在引入 ZeroClipboard.js 之后, <button id="clip_button&q ...
- JS实现文本复制与剪切
我们在网页上放置一个复制按钮,主要用来方便用户复制链接之类的复杂文本,以往的做法是,通过JS依靠Flash,甚至借助jQuery庞大的js库来实现文本复制到剪贴板的.今天我要给大家介绍的是一款极现代的 ...
- Android 复制 粘贴 剪贴板的使用 ClipboardManager
Copy and Paste 版本:Android 4.0 r1 快速查看 用于复制粘贴数据的基于剪贴板的框架. 同时支持简单和复杂的数据,包括文本串.复杂的数据结构.文本和二进制流数据.程序 as ...
- js实现点击按钮复制文本功能
最近项目活动中用到复制文本功能,发现在chrome中之前的clipboard的demo失效了,查了下发现是因为版本升级导致的.最新用法如下: <!DOCTYPE html> <htm ...
- 原生 js 实现点击按钮复制文本
最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理 ...
- 复制粘贴之插件(clipboard.min.js)不需要安装flash
<!DOCTYPE html> <html> <head> <title>ZeroClipboard Test</title> <me ...
- html5: 复制到剪贴板 clipboard.js
1.使用clipboard.min.js工具,引用此js 注意事项: IOS微信网页开发中,若使用此工具来开发复制功能,则需要在超链接/按钮上新增 onclick=" " 2.cl ...
随机推荐
- Python学习笔记【第三篇】:if判断、while循环、for循环
如果某些条件满足,才能做某件事情,而不满足时不允许做,这就是所谓的判断 不仅生活中有,在软件开发中“判断”功能也经常会用到 if判断语句 if 要判断的条件: 条件成立 num = 50 if num ...
- Redis数据结构以及应用场景
1. Redis数据结构以及应用场景 1.1. Memcache VS Redis 1.1.1. 选Memcache理由 系统业务以KV的缓存为主,数据量.并发业务量大,memcache较为合适 me ...
- IdentityServer4源码颁发token分析及性能优化
IdentityServer4源码地址 IdentityModel源码地址 以下的流程用ResourceOwnerPassword类型获取token作为介绍 分两种获取形式说明 token请求地址为默 ...
- [原创]K8PackWebShell ASPX整站打包工具
[原创]K8PackWebShell ASPX整站打包工具[K.8](有无Rar执行权限都可以) 2011-06-11 01:49:21| 分类: 原创工具 Name: K8PackWebShell ...
- “五年经验”年薪50W分享Java程序员掌握什么技术才不会被淘汰
在这个IT系统动辄就是上亿流量的时代,Java作为大数据时代应用最广泛的语言,诞生了一批又一批的新技术,包括HBase.Hadoop.MQ.Netty.SpringCloud等等 . 一些独角兽公司以 ...
- Net Core平台灵活简单的日志记录框架NLog+Mysql组合初体验
Net Core平台灵活简单的日志记录框架NLog初体验 前几天分享的"[Net Core集成Exceptionless分布式日志功能以及全局异常过滤][https://www.cnblog ...
- 【python35小工具】b站弹幕保存
后面有时间学习弹框,加个弹框 效果图: 原理: 原理简单不繁琐 1 根据设置的参数去post请求json参数 2 json提取出用户名和时间以及弹幕内容 (其中值得注意的时,页面默认会保存10个弹幕, ...
- Springboot 启动详解
1.前言 最近一直在看Springboot和springcloud代码,看了将近20多天,对这两个系统的认知总算是入了门.后续应该会有一个系列的文章,本文就先从Springboot的启动入手. 2.容 ...
- Android AIDL 实例
为使应用程序之间能够彼此通信,Android提供了IPC (Inter Process Communication,进程间通信)的一种独特实现: AIDL (Android Interface Def ...
- python集合类型
集合类型简介 集合也是容器,其内元素都是无序.唯一.不可变的.它常用来做成员测试.移除重复数据.数据计算(比如交集.并集.差集). 集合Set是dict的无value版.集合也使用大括号包围: > ...