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. Yum三方仓库——RPMForge

    参考:How to Enable RPMForge Repository in RHEL/CentOS 7.x/6.x/5.x RPMForge / RepoForge这两个项目已经死亡,不应该使用 ...

  2. Python中的时间

    coding:utf-8 from time import strftime, localtime import time print(time.time()) time1=strftime('%Y- ...

  3. k8s的组件

    1.Master组件 1.API Server K8S对外的唯一接口,提供HTTP/HTTPS RESTful API,即kubernetes API.所有的请求都需要经过这个接口进行通信.主要负责接 ...

  4. k8s的paas平台

    高可靠设计,Etcd 集群,Kubernetes 三主节点,保证集群的高可用性. 基于 GlusterFS /nfs集群,在生产环境和非生产环境下提供存储卷服务. Flannel+VXLAN,提供可靠 ...

  5. AJAX学习笔记——JSON

    JSON基本概念 1.JSON : JavaScript对象表示法( JavaScript Object Notation ) 2.JSON是存储和交换文本信息的语法,类似XML.它采用键值对的方式来 ...

  6. 云计算(7)---the scheduler of Hadoop

    The scheduler of Hadoop Programming MapReduce 在有些情况下,reducer也可以先开始于Map.但为了便于理解,在这儿我们都是使reduce不会早于map ...

  7. python 单引号与双引号的转义

    import simplejson a = """{"a":"\\""}""" b = & ...

  8. 关于Maven打包

    Maven打包构建完全指南和最佳实践 Maven最佳实践:划分模块 IDEA一个项目引用另一个项目 IDEA创建多个模块MavenSpringBoot项目   这个简单明了,基础知识

  9. 三十.数据库服务概述 构建MySQL服务器 、 数据库基本管理 MySQL数据类型

    mysql50:192.168.4.50 1.构建MySQL服务器 安装MySQL-server.MySQl-client软件包 修改数据库用户root的密码 确认MySQL服务程序运行.root可控 ...

  10. P1928 外星密码

    题目描述 有了防护伞,并不能完全避免 2012 的灾难.地球防卫小队决定去求助外星种族的帮 助.经过很长时间的努力,小队终于收到了外星生命的回信.但是外星人发过来的却是一 串密码.只有解开密码,才能知 ...