<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>

</head>

<body>

    <button type="button" class="btn btn_copy_text" data-clipboard-text="要复制的内容111111">1111111111111111</button>

    <button type="button" class="btn btn_copy_text" data-clipboard-text="要复制的内容222">2222222222222222</button>

    <button type="button" class="btn btn_copy_text" data-clipboard-text="要复制的内容333">33333333333333</button>

    <script>

        // 重要提示1 Clipboard  改成ClipboardJS 不然会提示错误的 绑定button上，避免ios的不兼容性问题

        console.log(ClipboardJS)

            //复制文本

            var clip = new ClipboardJS('.btn_copy_text');

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

                e.trigger.interHTML = "复制成功";

            });

    </script>

</body>

</html>

H5和PC实现点击复制当前文字的功能，兼容ios,安卓的更多相关文章

  1. 点击复制文字到剪贴板兼容性安卓ios

    一般那种活动H5分享可能会用到点击复制文字到剪贴板,很简单的功能 于是搜了一搜:js复制文字到剪贴板,可用结果大致分为两类: 一类是js原生方法,这种方法兼容性不好,不兼容ios: https://d ...

  2. 移动端、pc端通用点击复制

    点击复制 function copyArticle(event){ const range = document.createRange(); range.selectNode(document.ge ...

  3. JS 点击复制Copy (share)

    分享自:http://www.cnblogs.com/athens/archive/2013/01/16/2862981.html 1.实现点击按钮,复制文本框中的的内容 1 <script t ...

  4. JS点击复制

    <!DOCTYPE html><html><head> <script type="text/javascript"> functi ...

  5. JS 点击复制Copy

    1.实现点击按钮,复制文本框中的的内容 1 <script type="text/javascript"> 2 function copyUrl2() 3 { 4 va ...

  6. JS 点击复制按钮 将文字复制到手机剪贴板

    我们在制作移动端网页的时候,经常会遇到这样一个问题,如何点击一个"复制"按钮,把一串文字复制到手机剪贴板,如上图所示. 看了网上的一些方法后,感觉那些方法都太复杂,有点要用插件,有 ...

  7. js实现内容点击复制

    <!DOCTYPE html><html> <head> <script type="text/javascript"> funct ...

  8. 手机PC监听用户复制内容

    最近应项目需求,为了获取到更多用户想要搜索的信息,需要把用户点击复制的内容获取到,然后传送给后台以更好的了解客户需求,自己在这个方法上栽了个大跟头,只考虑其一却不知道结合使用,脑袋卡顿,随笔记下,望自 ...

  9. vue中点击复制粘贴功能

    1.下载clipboard.js cnpm install clipboard --save 2.引入,可以在mian.js中全局引入也可以在单个vue中引入 import Clipboard fro ...

随机推荐

  1. MyBatis 的 XML 映射文件使用说明

    简介 文档参考地址:http://www.mybatis.org/mybatis-3/zh/index.html MyBatis 的真正强大在于它的映射语句,也是它的魔力所在.由于它的异常强大,映射器 ...

  2. Redis 指令 学习笔记

    Redis 什么是Redis redis是一种nosql数据库,他的数据是保存在内存中,同时redis可以定时把内存数据同步到磁盘,即可以将数据持久化,还提供了多个语言的API,操作比较方便 安装re ...

  3. 基于python的opcode优化和模块按需加载机制研究(学习与个人思路)（原创）

    基于python的opcode优化和模块按需加载机制研究(学习与思考) 姓名:XXX 学校信息:XXX 主用编程语言:python3.5 个人技术博客:http://www.cnblogs.com/M ...

  4. Java核心技术及面试指南 键值对方面的面试题总结以及答案

    3.3.5.1如何遍历HashMap对象?尤其请说明通过Iterator遍历HashMap对象的方法. 建议用这种方式: Set<Entry<String,String>>en ...

  5. vue-manage-system 后台管理系统开发总结

    前言 vue-manage-system,一个基于 Vue.js 和 element-ui 的后台管理系统模板,从2016年年底第一个commit,到现在差不多两年了,GitHub上也有了 5k st ...

  6. Linux编程 21 shell编程(环境变量，用户变量，命令替换)

    一.概述 这篇介绍shell的变量使用,跟其实语言一样,都有声明变量,使用变量,在shell中变量允许你临时地将信息存储中shell脚本中,以便和脚本的其他命令一起使用. 1.1 环境变量 在前面章节 ...

  7. Plugin with id 'com.novoda.bintray-release' not found.的解决方案

    import Module的时候,有时候会提示Plugin with id 'com.novoda.bintray-release' not found. 点击Open File,定位到该Module ...

  8. Google的java工具类Guava

    前言 google开发java项目肯定也不想重复造轮子,所以肯定也有工具类,就是它了:Guava 我将举例几个实际的例子,发挥这个工具类好用的功能.更多的方法和功能,还有内部的实现可以直接参考http ...

  9. docker - 容器里安装redis

    在docker中安装redis 使用命令行安装redis 下载并解压 wget http://download.redis.io/releases/redis-3.2.6.tar.gz tar -xv ...

  10. LAMP环境快速搭建

    1.安装httpd [root@localhost httpd]# yum -y install httpd #安装httpd [root@localhost httpd]# chkconfig ht ...