直接上代码：

<!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. Redis问题MISCONF Redis is configured to save RDB snapshots....

    Redis问题MISCONF Redis is configured to save RDB snapshots, but is currently not able to persist on di ...

  2. SpringMVC+SPring+Maven+Mybaits+Shiro+Mybaits基础开发项目

    开源项目资料库:https://gitee.com/VCS/seezoon-framework-all Seezoon项目介绍 基于spring,mybatis,shiro面向接口开发的的一套后台管理 ...

  3. 使用VTK与Python实现机械臂三维模型可视化

    三维可视化系统的建立依赖于三维图形平台, 如 OpenGL.VTK.OGRE.OSG等, 传统的方法多采用OpenGL进行底层编程,即对其特有的函数进行定量操作, 需要开发人员熟悉相关函数, 从而造成 ...

  4. json在线解析

    http://json.cn/ 一个非常不错的,json格式学习和处理的网站

  5. C#程序实现窗体的最大化/最小化

    C#程序实现窗体的最大化/最小化 http://blog.csdn.net/jiangqin115/article/details/41251215 private void button1_Clic ...

  6. Oracle 错误总结及问题解决 ORA

    参考地址 ORA-00001: 违反唯一约束条件 (.)错误说明:当在唯一索引所对应的列上键入重复值时,会触发此异常.ORA-00017: 请求会话以设置跟踪事件ORA-00018: 超出最大会话数O ...

  7. ASP.NET 动态查找数据 并且生成xml文档 同时使用xslt转换为xhtml

    前言 xsl是一门标签解析语言,很适合做动态网页的前台标签 www.bamn.cn 1 首先是aspx页面 添加一个输入框 按钮 还有一个用来显示解析后的xhtml代码的控件 <form id= ...

  8. ios中一级导航

    效果图 第一步先下载文件 http://pan.baidu.com/share/link?shareid=2148445651&uk=9237761877 将目录引入到xcode中 在xcod ...

  9. HBase Go客户端Row构造注意事项

    1. Hbase 的Go客户端语言使用方法 2. Hbase的Row使用注意事项 2.1. Row的前几个字段尽量散列 2.2. Row的排序是把所有Row中的字符做字典排序 我们最近在一个项目中使用 ...

  10. Mysql模糊查询 select count(*) from sys_invitation where from_id like '%1006%';

    select count(*) from sys_invitation where from_id like '%1006%'; 查询结果 select * from sys_invitation w ...