直接上代码：

<!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. 12 个非常实用的 jQuery 代码片段

    jQuery是一个非常流行而且实用的JavaScript前端框架,本文并不是介绍jQuery的特效动画,而是分享一些平时积累的12个jQuery实用代码片段,希望对你有所帮助. 导航菜单背景切换效果 ...

  2. join联表查询方法

    $model = Shipping::join('shipping_area', 'shipping_area.shipping_id', '=', 'shipping.shipping_id') - ...

  3. PCI(Payment Card Industry)合规

     PCI-DSS(Payment Card Industry-Data Security Standard) 1.构建并维护安全的网络 2.保护持卡人数据 3.维护漏洞管理程序 4.执行严格的访问控制 ...

  4. Solidworks机构运动仿真

    使用Solidworks Motion插件可以对机构进行运动学/动力学仿真.机构约束添加完成后,可以在主动部件(关节)处添加马达进行驱动.运动可以是简单的匀速运动或者复杂的表达式.数据点形式的运动. ...

  5. Linux(centos6.5)下安装jenkins

    Jenkins 的前身是 Hudson 是一个可扩展的持续集成引擎. 通俗的来讲,jenkins就是一个可以实现自动化部署的一个插件, 对于我来说,也是应用在系统部署上. 废话不多说,直接进入我们的安 ...

  6. redis配置笔记

    #cd /opt#tar -zxvf redis-4.0.6.tar.gz#cd redis-4.0.6#make #cd src#make install PREFIX=/usr/local/red ...

  7. Fiddler配置https

    问题描述: fiddler加载认证不成功... 问题解决: 手工生成认证证书 00.配置HTTPS 01.勾选https 02.添加ssh认证 11. 找到fiddler的安装目录 手工生成认证秘钥 ...

  8. Axure快速原型教程02--创建页面和设置界面

    目录 Axure快速原型教程02--创建页面和设置界面 Axure快速原型教程01--原型说明下载和安装 首先,在左侧的面板中,我们发现有一个叫sitemap的面板,这个面板就是我们的一个个的页面了, ...

  9. iOS热更新技术被苹果官方警告？涉及到RN、Weex、JSPatch

    本文为转载文章 故事背景: 这两天,不少iOS开发群都炸窝了,原因是部分iOS开发者收到了苹果的警告邮件: 有开发者质疑可能是项目中使用了JSPatch.weex以及ReactNative等热更新技术 ...

  10. E325 注意 发现交换文件

    git中的 交换文件应该是保持当前git的session的一种文件. git中,如果出现这个有两种原因: 1.你开了两个git客户端对同一个git仓库进行了操作.如果是这样的话,退出一个.正常退出,不 ...