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. Django组件之modelformset

    ModelFormSet 基于modelform 实现的批量处理 前端: <form method="post" action=""> {% csr ...

  2. Python基础——运行机理

    Python解释器 从Python这门编程语言的实现上来讲,Python是一个名为解释器的软件包,包含:一个解释器 和 支持的库 解释器又有不同版本:CPython.Jython.IronPython ...

  3. Nginx服务rewrite模块功能说明 网站自动跳转功能

    实现域名地址信息跳转,用于做伪静态地址 www.impkk.com/oldboy?edu.html 动态地址 www.impkk.com/oldboy-edu.html 伪静态地址 rewrite ^ ...

  4. Vue外卖的学习之路

    用Vue打造外卖项目 一.项目前整理思绪 (1)项目所需的技术栈 (2)项目分布 (3)整体项目文件介绍

  5. Codeforces #503 C. Elections（贪心，逆向

    我的参考的博客地址 题目 逆向考虑. 暴力遍历 k(k是1到n/2+1 范围内的),挑出对于每一个k,记对于党派 i,num[ i ]为其票数.num[ i ]小于k-1的就不用改变投票了(这部分是比 ...

  6. python_面向对象——属性方法property

    1.属性方法 class Student(object): def __init__(self,name): self.name = name @property #属性方法:把一个方法变成一个静态的 ...

  7. chrome开启headless模式以及代理

    google-chrome-stable --disable-gpu --remote-debugging-port=9222 --headless -remote-debugging-address ...

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

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

  9. [ARIA] What is Accessible Name Calculation?

    What's in a name? In this lesson, I'll explain the concept of naming interactive elements for screen ...

  10. 学到了武沛齐讲的Day12-5

    字节为8个位为单位 而计算机存储是位为单位储存.(有点意思) 开始老美用的是ascii码(1个字节),  utf8: 3字节   gbk : 2字节      目前的用于实用的 Unicode 版本对 ...