JS pc端和移动端实现复制到剪贴板功能实现

在网页上复制文本到剪切板，一般是使用JS+Flash结合的方法，网上有很多相关文章介绍。随着 HTML5 技术的发展，Flash 已经在很多场合不适用了，甚至被屏蔽。本文介绍的一款JS插件，实现了纯JS方法复制文本到剪切板。

插件名是Clipboard.js，该插件不依赖 Flash，而是依赖于最新HTML5推出 Selection API 和 execCommand API。

Github：
https://github.com/zenorocha/clipboard.js

可以通过npm方式安装：

npm install clipboard --save

首先需要在页面引入：

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

下面直接上html代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>复制功能实现</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no,maximum-scale=1.0, minimum-scale=1.0">

    <script src ="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>

</head>

<body>

    <input class="foo" value="这里是内容">

    <span class="fdd">阿斯顿发斯蒂芬阿斯蒂芬</span>

    <button class="btn" data-clipboard-target=".foo">点击复制</button>

    <button class="btn" data-clipboard-target=".fdd">点击复制</button>

    <script src ="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>

    <script>

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

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

                alert("复制成功!");

                 e.clearSelection();

        });

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

                  alert("复制失败!");

        });

    </script>

</body>

</html>

参考地址:

https://www.cnblogs.com/52fhy/p/5383813.html

JS pc端和移动端共同实现复制到剪贴板功能实现的更多相关文章

  1. 【原】js实现复制到剪贴板功能，兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  2. 【转】js实现复制到剪贴板功能，兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  3. 黄聪：JS实现复制到剪贴板功能，兼容所有浏览器（转）

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  4. 【转】js插件zClip实现复制到剪贴板功能

    相信这个功能大家平时上网经常能碰到,以前也没怎么留意怎么实现的,直到项目中需要. 网上一搜一大堆,单纯使用js方法也不是没有,但是由于各浏览器的安全机制不同,不是跨浏览器的.去看了几个常用的网站,都是 ...

  5. js插件zClip实现复制到剪贴板功能

    相信这个功能大家平时上网经常能碰到,以前也没怎么留意怎么实现的,直到项目中需要. 网上一搜一大堆,单纯使用js方法也不是没有,但是由于各浏览器的安全机制不同,不是跨浏览器的.去看了几个常用的网站,都是 ...

  6. 纯js实现复制到剪贴板功能

    在网页上复制文本到剪切板,一般是使用JS+Flash结合的方法,网上有很多相关文章介绍.随着 HTML5 技术的发展,Flash 已经在很多场合不适用了,甚至被屏蔽.本文介绍的一款JS插件,实现了纯J ...

  7. js/jQuery实现复制到剪贴板功能，兼容所有浏览器

    因为工作的原因,需要实现这样一个功能:点击按钮,复制文本内容. 百度了一下,大都语焉不详,最终找到了一篇很好的博文,有讲解,有实例,捣鼓了一会,最终实现了功能. 网址在这里http://www.cnb ...

  8. js实现复制到剪贴板功能，兼容所有浏览器

    http://www.cnblogs.com/PeunZhang/p/3324727.html https://github.com/zeroclipboard/ZeroClipboard 复制链接到 ...

  9. JS实现复制到剪贴板(兼容FF/Chrome/Safari所有浏览器)

    现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏 ...

随机推荐

  1. python高并发的详解

    一.什么是高并发 高并发(High Concurrency)是互联网分布式系统架构设计中必须考虑的因素之一,它通常是指,通过设计保证系统能够同时并行处理很多请求. 高并发相关常用的一些指标有响应时间( ...

  2. Linux下Mysql服务安装【1】

    https://www.cnblogs.com/xiaxiaoxu/p/9978976.html 第一步:获取mysql8.0的yum源 进入mysql官网获取RPM包下载地址 https://dev ...

  3. 个性化召回算法实践(二)——LFM算法

    LFM算法核心思想是通过隐含特征(latent factor)联系用户兴趣和物品,找出潜在的主题和分类.LFM(latent factor model)通过如下公式计算用户u对物品i的兴趣: \[ P ...

  4. P2085 最小函数值[优先队列]

    题目描述 有n个函数,分别为F1,F2,...,Fn.定义Fi(x)=Ai*x^2+Bi*x+Ci (x∈N*).给定这些Ai.Bi和Ci,请求出所有函数的所有函数值中最小的m个(如有重复的要输出多个 ...

  5. Vue实现一个图片懒加载插件（转载）

    Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: &l ...

  6. nodeJs修改镜像源

    // 设置 淘宝镜像源npm config set registry https://registry.npm.taobao.org // 查看 使用的 镜像源npm config get regis ...

  7. Django REST framework+Vue 打造生鲜电商项目（笔记五）

    一.viewsets实现商品详情页接口 (1)商品详情页只需要多继承一个类(mixins.RetrieveModelMixin)就可以了,(它的功能就是展示商品详情) class GoodsListV ...

  8. yum安装出现No package crontabs available解决办法

    其意思是:yum中不存在这个包 所以解决办法是 1.更新yum   更新yum仓库: yum -y update 2.查看包名在yum中是什么   yum search  all crontabs

  9. Vue获取后端数据 渲染页面后跳转

    主页面 <template> <div> <ul v-for="item in courseList"> <router-link :to ...

  10. [CSS] Conditionally Assign Style to a Parent Element with Focus-Within Pseudo-class

    Use the focus-within pseudo-class to conditionally assign styling to a parent element when its child ...