网址:https://clipboardjs.com/

使用方法:

1、引入js <script src="dist/clipboard.min.js"></script>

2、每一个需要复制或者操作的元素都需要new一个实例

3、三种方式实现复制

  • 复制input元素里内容,input不能隐藏,type不能设置为hidden,否则无效
<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git"> <!-- Trigger -->
<button style="width:100px;height:50px" value="复制" data-clipboard-target="#foo">
</button>
var copyBtn= new ClipboardJS('.btn');
  • 直接将需要复制的元素写在button 中

    <button class="btn" data-clipboard-text="需要复制的内容">
    复制
    </button>
    var copyBtn= new ClipboardJS('.btn');
  • 写在代码中

   

<button class="btn" aria-label="需要复制的内容">
复制
</button>
var copyBtn= new ClipboardJS('.btn', {
text: function (trigger) {
return trigger.getAttribute('aria-label');
}
});

iphone只支持safari10+,有些移动端使用方式1,2无效时,可试试方式3

clipboard.js一个可以在移动端一键复制的插件的更多相关文章

  1. 使用clipboard.js实现复制内容至剪贴板

    下载插件 clipboard.js是不依赖flash,实现复制内容至剪贴板的js插件.下载clipboard.js的压缩包,根据需要选择dist目录下的压缩或未压缩版. github地址:https: ...

  2. 移动端无法复制:使用clipboard.js碰到的一个小问题

    移动端无法复制:使用clipboard.js碰到的一个小问题   直接看下面的代码:在移动端访问,点击,能正常复制. <html> <head> <meta http-e ...

  3. clipboard.js操作剪贴版——一些移动端交互和兼容经验

    https://github.com/zenorocha/clipboard.js 库,真的是个好库,而且不依赖flash,几乎完美支持移动端.但是,移动端应用有些不趟不知的小tip,这里归档下. 原 ...

  4. Clipboard.js : 移动端浏览器实现网页内容复制

    .bl { padding: 5px 10px; border-left: 3px solid #009a61; background: #f6f6f6; color: #555; font-size ...

  5. 解决clipboard.js在移动端复制失败的问题

    1.前沿 在项目中使用clipboard.js插件去实现点击按钮,复制一段网址到剪切板的功能.功能做好后,一开始无论这pc端还是移动端都能正常使用.突然某一天测出了一个bug:移动端复制失败,pc端是 ...

  6. 一款给力的一键复制js插件-clipboard.js

    一款没有依赖的.给力的一键复制的JS插件   点我前往github 案例demo见下载包内demo文件夹. 这里晒出最常用的几种方式,以供不时之需. <!DOCTYPE html> < ...

  7. 前端技术之:如何在Vue中使用clipboard.js复制服务端数据

    第一步 创建点击对象页面元素,并绑定业务数据. <el-button type="text" size="mini" class="copy-b ...

  8. 使用clipboard.js复制页面内容到剪切板

    最近在做一个的智能客服Web端浏览器应用,其中有一项需求是客户在获取系统返回的 答案后点击“复制答案”按钮将答案复制到系统剪切板.本以为这是一个小case,但是发现如果 要对各种主流浏览器都有良好的兼 ...

  9. clipboard.js兼容ios

    再使用clipboard.js做项目时,项目需求是在非input,button等可以点击的标签(span,p,div)上实现点击来复制内容,在PC端和移动端android没问题,但是到了ios毫无反应 ...

随机推荐

  1. Redis配置sentinel模式

    Redis配置sentinel模式 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 哨兵(sentinel)主要是完成三个功能:监控,通知,自动故障转移功能.sentinel是安装R ...

  2. ETL过程跑完后,使用python发送邮件

    目标库中,如果有行数为0的表,使用python发送邮件 # -*- coding:utf-8 -*- # Author: zjc # Description:send monitor info to ...

  3. DirectX11 With Windows SDK--19 模型加载:obj格式的读取及使用二进制文件提升读取效率

    前言 一个模型通常是由三个部分组成:网格.纹理.材质.在一开始的时候,我们是通过Geometry类来生成简单几何体的网格.但现在我们需要寻找合适的方式去表述一个复杂的网格,而且包含网格的文件类型多种多 ...

  4. python之路(2)集合(set)和字符串格式化

    目录 集合(set) 字符串的格式化(%和format) 集合(set) {‘a’,'b','c','d','e'} 定义:有不同元素组成的集合,集合的元素为不可变类型(数字,字符串,元组),集合是一 ...

  5. HDU 5965(三行扫雷 dp)

    题意是在一个 3 行 n 列的图上进行扫雷,中间一行没有雷,且中间一行的每一格都会显示周围的雷数,问根据已知的雷数在上下两行设置地雷的方法数. 分析知每一列所填雷数的和与周围的雷数有关,但每列具体的填 ...

  6. JS获取当月第一天和最后一天

    /** * 获取当前月的第一天 */function getCurrentMonthFirst(){ var date=new Date(); date.setDate(1); return date ...

  7. Python 入门基础14 --time、os、random、json、pickle 常用模块1

    今日内容: 一.常用模块 2019.04.10 更新 1.time:时间 2.calendar:日历 3.datetime:可以运算的时间 4.sys:系统 5.os:操作系统 6.os.path:系 ...

  8. mongoDB3.0版本使用express读取数据

    使用express连接数据库操作 var express = require('express'); var app = express(); var MongoClient = require('m ...

  9. canvas图片合成中的坑

    需求 要用代码来实现多张外部图片和文字的合并而且要上传到七牛云,再将图片链接通过客户端分享出去.图片背景需要支持用户自定义更换. 实现方案 在一个canvas上多次调用drawImage函数,分别绘制 ...

  10. 【转】【Linux】Swap与Memory

    背景介绍 Memory指机器物理内存,读写速度低于CPU一个量级,但是高于磁盘不止一个量级.所以,程序和数据如果在内存的话,会有非常快的读写速度.但是,内存的造价是要高于磁盘的,且内存的断电丢失数据也 ...