直接上代码：

<!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. CTP交易函数大全

    管理接口 交易接口

  2. MySQL general log

    1:查看版本 SELECT VERSION(); 2:查看当前的日志保存方式 mysql> SHOW VARIABLES LIKE '%log_output%'; +-------------- ...

  3. vue key

    有相同父元素的子元素必须有独特的 key.重复的 key 会造成渲染错误. <ul> <li v-for="item in items" :key="i ...

  4. Eclipse项目修改没有同步到编译的问题

    有两个原因: 1:项目有错,不能正常编译:查看是否有Jar包冲突.JDK版本问题等: 2:编译输出目录配置错误: Maven项目会修改项目编译时的输出路径到target文件夹,但是我们用Myelips ...

  5. jump-game i&&ii 能否跳出区间 贪心

    I: Given an array of non-negative integers, you are initially positioned at the first index of the a ...

  6. Android开发之使用HttpURLConnection进行POST请求

    一.前提准备 在开始实际编码之前,我们有必要先了解下将会用的类以及方法,进行一个大体的了解. 1.URL类 这个类主要的功能是定位到要获取资源的网址以及打开连接.比如下面的代码: URL realur ...

  7. LS下怎样最大限度的提高Domino下Web应用的速度

    1.用For 循环代替Do 循环,因为Do循环会反复的计算条件! 2.在数族元素中循环式用Forall代替for.一元数组会快75%,二元会快50%左右. 3.简化If里的条件,如:if a=x an ...

  8. Generating phar.phar chmod: cannot access `ext/phar/phar.phar': No such file or directory make: [ext/phar/phar.phar] Error 1 (ignored)

    make install出现了cp: cannot stat `ext/phar/phar.phar': No such file or directory 于是我又: cd ext/phar/ls ...

  9. 转error while loading shared libraries的解決方法

    error while loading shared libraries的解決方法 者 icq 21:03 | 靜態連結網址 | 迴響 (0) | 引用 (1) | 點閱次數 (270) | Prog ...

  10. JavaScript callback function 回调函数的理解

    来源于:http://mao.li/javascript/javascript-callback-function/ 看到segmentfault上的这个问题 JavaScript 回调函数怎么理解, ...