直接上代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>target-div</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

    <!-- 1. Define some markup -->

    <div>hello</div>

    <button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>

    <!-- 2. Include library -->

    <script src="../dist/clipboard.min.js"></script>

    <!-- 3. Instantiate clipboard -->

    <script>

    var clipboard = new ClipboardJS('.btn');

    clipboard.on('success', function(e) {

        console.log(e);

    });

    clipboard.on('error', function(e) {

        console.log(e);

    });

    </script>

</body>

</html>

demo:点击下载

JS实现PC、Android、IOS端的点击按钮复制内容功能的更多相关文章

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

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

  2. js 实现页面点击按钮复制内容

    前言: 我们平时在页面中是按照长按来实现复制相关的内容,那么怎么用js实现点击按钮实现复制相关的内容呢?请看如下方法: 实现步骤: 1.引入相关的js(ClipboardJS插件) <scrip ...

  3. js点击按钮复制内容到粘贴板

    复制内容到粘贴板,就是要选择需要复制的内容并执行document.execCommand("copy")命令: //复制内容到粘贴板 function copyToClipboar ...

  4. js进阶 12-16 jquery如何实现通过点击按钮和按下组合键两种方式提交留言

    js进阶 12-16 jquery如何实现通过点击按钮和按下组合键两种方式提交留言 一.总结 一句话总结:实现按下组合键提交留言是通过给input加keydown事件,判断按键的键码来实现的. 1.如 ...

  5. JS判断PC和移动端设备

    1.方法一 function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = ["Android", ...

  6. PC Android IOS资料同步更新

    在程序发布后,特别是IOS版本,想替换里边的内容,重新发布版本很是麻烦.我们就可以动态用AssetBundle更新内容. 如果是自定义二进制文件,先要改为“.Bytes”后缀的文件,Unity会把这个 ...

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

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

  8. JS判断PC还是移动端打开网页

    最近在做移动端网站,也需兼容PC端.还没找到更好的方法,只能用javascr判断用户是在PC端打开还是移动端打开. JS判断 var isPC = function (){    var userAg ...

  9. 原生js获取pc和移动端屏幕宽、高的方法

    pc端: var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; ...

随机推荐

  1. Java BIO、NIO、AIO 学习

    正在学习<大型网站系统与JAVA中间件实践>,发现对BIO.NIO.AIO的概念很模糊,写一篇博客记录下来.先来说个银行取款的例子: 同步 : 自己亲自出马持银行卡到银行取钱(使用同步IO ...

  2. 算法笔记_218:花朵数（Java）

    目录 1 问题描述 2 解决方案   1 问题描述 一个N位的十进制正整数,如果它的每个位上的数字的N次方的和等于这个数本身,则称其为花朵数.例如:当N=3时,153就满足条件,因为 1^3 + 5^ ...

  3. iOS sqlite C语言操作

    利用周六时间看了一下关于sqlite的知识.在这记录一下.看的传智播客视频 对数据的操作基本上就是增删改查: static sqlite3 *db; //声明一个数据库 @implementation ...

  4. 【收藏】常用SQL语句

    .1参考手册 ), owner ), species ), sex ), birth DATE, death DATE); //创建表 mysql> show tables; //查看数据库中的 ...

  5. layer.js 弹窗组件API文档

      基础参数 type title content skin area offset icon btn closeBtn shade shadeClose time id shift maxmin f ...

  6. Zookeeper的Watcher机制

    ZooKeeper 提供了分布式数据的发布/订阅功能, 在 ZooKeeper 中引入了 Watcher 机制来实现这种分布式的通知功能. ZooKeeper 允许客户端向服务端注册一个 Watche ...

  7. 在CLion项目中指定不同版本的链接库

    在项目中, 需要使用到libevent-2.1.x, 但是Ubuntu16.04自带的libevent版本为2.0.5, 需要另外编译安装新版的libevent, 安装过程很简单 -stable.ta ...

  8. 基于kettle8的web端调度监控平台

    发布时间:2018-11-16   技术:spring+springmvc +beetlsql+quartz+kettle8   概述 Kettle调度监控平台(以下简称KS)是一个自主开发的java ...

  9. 【组队赛三】-D 优先队列 cf446B

    DZY Loves Modification Time Limit:2000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I64u Sub ...

  10. Java爬虫框架调研

    Python中大的爬虫框架有scrapy(风格类似django),pyspider(国产python爬虫框架). 除了Python,Java中也有许多爬虫框架. nutch apache下的开源爬虫程 ...