直接上代码：

<!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. vue build后运行错误

    events.js:141 throw er; // Unhandled 'error' event 这个是端口占用的问题 $ http-server dist events.js:141 throw ...

  2. Java DES 加解密（"DES/EBC/NoPadding"）

    private static final Cipher DES_CIPHER; static { try { DES_CIPHER = Cipher.getInstance("DES/ECB ...

  3. logback-spring.xml配置示例

    <?xml version="1.0" encoding="UTF-8"?> <configuration> <include r ...

  4. OpenCV学习代码记录——轮廓(contour)检测

    很久之前学习过一段时间的OpenCV,当时没有做什么笔记,但是代码都还在,这里把它贴出来做个记录. 代码放在码云上,地址在这里https://gitee.com/solym/OpenCVTest/tr ...

  5. 【tp5】索引数组转成关联数组 （ $a=[]，转换成 $a['aa'=>2,'bb'=>'3c'] ）

    概念: 索引数组 ==== >>>$arr = []; 关联数组 ====>>> $arr = [ 'orange'=>1,'apple'=>'good ...

  6. 阿里云安装jdk，tomcat，maven，svn，git，nginx

    1. 首先通过xftp等工具上传安装包 2. 配置目录 cd usr mkdir java cd java mkdir jdk mkdir tomcatmkdir maven 3. 安装jdk 3.1 ...

  7. iOS linker command failed with exit code 1 (use -v to see invocation)多种解决方案汇总

    有时可能会遇到这种错误,关键是这种错误,有时只有这一句话,也不会给更多错误信息. 网上找了一些,总结了如下:(PS:以下是按照解决简易程度排序,不代表出现概率) 1.bitcode问题 解决如下:原因 ...

  8. 修改cnblogs日历控件CSS

    自定义cnblogs日期控件的样式时, 关于透明度 控件头部死活没法透明 在background属性值后边添加!important即把cnblogs系统自带的属性覆盖, 解决了该问题. !import ...

  9. 利用 WireShark 深入调试网络请求

    来源:伯乐在线 - bestswifter 如有好文章投稿,请点击 → 这里了解详情 背景 最近发现我们产品在打开广告链接(Webview)时有一定概率会非常慢,白屏时间超过 10s,追查广告的过程中 ...

  10. VirtualBox虚拟机增加CentOS根目录容量 LVM扩容

    对于目前的网络开发者来说,比较好的搭档就是Win7+VirtualBox+CentOS的组合,既可以发挥Linux强大的网络服务功能,也可以有效的隔离各项服务拖慢系统,影响系统的运行,对于新手来说可以 ...