资源

推荐使用: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实现将文本复制到剪贴板的方法的更多相关文章

  1. JQery插件clipboard.js ----将文本复制到剪贴板的现代化方法

    ### 之前用了js自带的剪贴板对象clipboardData 对象以为就可以实现粘贴复制,但是种只支持IE的. 就找了jq的一个插件Zclip,但是网上的说法是利用了flesh来实现的,我用了之后可 ...

  2. js实现各种复制到剪贴板的方法

    一.实现点击按钮,复制文本框中的的内容 <script type="text/javascript"> function copyUrl2() { var Url2=d ...

  3. ZeroClipboard 插件实现文本复制到剪贴板

    ZeroClipboard 的官网 点这里,github地址 点这里. 事例如下: 在引入 ZeroClipboard.js 之后, <button id="clip_button&q ...

  4. JS实现文本复制与剪切

    我们在网页上放置一个复制按钮,主要用来方便用户复制链接之类的复杂文本,以往的做法是,通过JS依靠Flash,甚至借助jQuery庞大的js库来实现文本复制到剪贴板的.今天我要给大家介绍的是一款极现代的 ...

  5. Android 复制 粘贴 剪贴板的使用 ClipboardManager

    Copy and Paste 版本:Android 4.0 r1  快速查看 用于复制粘贴数据的基于剪贴板的框架. 同时支持简单和复杂的数据,包括文本串.复杂的数据结构.文本和二进制流数据.程序 as ...

  6. js实现点击按钮复制文本功能

    最近项目活动中用到复制文本功能,发现在chrome中之前的clipboard的demo失效了,查了下发现是因为版本升级导致的.最新用法如下: <!DOCTYPE html> <htm ...

  7. 原生 js 实现点击按钮复制文本

    最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理 ...

  8. 复制粘贴之插件(clipboard.min.js)不需要安装flash

    <!DOCTYPE html> <html> <head> <title>ZeroClipboard Test</title> <me ...

  9. html5: 复制到剪贴板 clipboard.js

    1.使用clipboard.min.js工具,引用此js 注意事项: IOS微信网页开发中,若使用此工具来开发复制功能,则需要在超链接/按钮上新增 onclick=" " 2.cl ...

随机推荐

  1. Python学习笔记【第三篇】:if判断、while循环、for循环

    如果某些条件满足,才能做某件事情,而不满足时不允许做,这就是所谓的判断 不仅生活中有,在软件开发中“判断”功能也经常会用到 if判断语句 if 要判断的条件: 条件成立 num = 50 if num ...

  2. Redis数据结构以及应用场景

    1. Redis数据结构以及应用场景 1.1. Memcache VS Redis 1.1.1. 选Memcache理由 系统业务以KV的缓存为主,数据量.并发业务量大,memcache较为合适 me ...

  3. IdentityServer4源码颁发token分析及性能优化

    IdentityServer4源码地址 IdentityModel源码地址 以下的流程用ResourceOwnerPassword类型获取token作为介绍 分两种获取形式说明 token请求地址为默 ...

  4. [原创]K8PackWebShell ASPX整站打包工具

    [原创]K8PackWebShell ASPX整站打包工具[K.8](有无Rar执行权限都可以) 2011-06-11 01:49:21|  分类: 原创工具 Name: K8PackWebShell ...

  5. “五年经验”年薪50W分享Java程序员掌握什么技术才不会被淘汰

    在这个IT系统动辄就是上亿流量的时代,Java作为大数据时代应用最广泛的语言,诞生了一批又一批的新技术,包括HBase.Hadoop.MQ.Netty.SpringCloud等等 . 一些独角兽公司以 ...

  6. Net Core平台灵活简单的日志记录框架NLog+Mysql组合初体验

    Net Core平台灵活简单的日志记录框架NLog初体验 前几天分享的"[Net Core集成Exceptionless分布式日志功能以及全局异常过滤][https://www.cnblog ...

  7. 【python35小工具】b站弹幕保存

    后面有时间学习弹框,加个弹框 效果图: 原理: 原理简单不繁琐 1 根据设置的参数去post请求json参数 2 json提取出用户名和时间以及弹幕内容 (其中值得注意的时,页面默认会保存10个弹幕, ...

  8. Springboot 启动详解

    1.前言 最近一直在看Springboot和springcloud代码,看了将近20多天,对这两个系统的认知总算是入了门.后续应该会有一个系列的文章,本文就先从Springboot的启动入手. 2.容 ...

  9. Android AIDL 实例

    为使应用程序之间能够彼此通信,Android提供了IPC (Inter Process Communication,进程间通信)的一种独特实现: AIDL (Android Interface Def ...

  10. python集合类型

    集合类型简介 集合也是容器,其内元素都是无序.唯一.不可变的.它常用来做成员测试.移除重复数据.数据计算(比如交集.并集.差集). 集合Set是dict的无value版.集合也使用大括号包围: > ...