网址: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. 老男孩Python全栈学习 S9 日常作业 006

    1.使用循环打印以下效果: 1: * ** *** **** ***** 2: ***** **** *** ** * 3: * *** ***** ******* ********* for i i ...

  2. 在Mac下安装mongodb

    本来想用brew一键安装的,但是一直不成功,解决了一个问题随即又抛出一个问题,后来只好老老实实去官网下载安装包了,解压到/usr/local目录下. 之前下载压缩包时忘记下载到/usr/local目录 ...

  3. 第一节:WebApi的纯原生态的RestFul风格接口和路由规则介绍

    一. 原生态接口 1. 从默认路由开始分析 在WebApiConfig.cs类中的Register方法中,我们可以看到默认路由如下: 分析:请求地址在 controller 前面需要加上 api/,c ...

  4. oldboy s21day07(深浅拷贝及文件操作)

    #!/usr/bin/env python# -*- coding:utf-8 -*- # 1.看代码写结果'''v1 = [1, 2, 3, 4, 5]v2 = [v1, v1, v1]v1.app ...

  5. react实战项目开发(1) 搭建react开发环境初始化项目(Create-react-app)

    前言 Create React App npm install -g create-react-app create-react-app my-app cd my-app npm start 执行命令 ...

  6. java和数据库中日期类型的常见用法

    (1)java中日期类型:Date.Timestamp(2)数据库中:Date.Timestamp(3)字符串和Date之间的格式化转换:    SimpleDateFormat类方法: format ...

  7. 集合-Comparator和Comparable

    文章内容参考博客:https://www.cnblogs.com/xujian2014/p/5215082.html 1.Comparable Comparable是排序接口,当一个类实现了Compa ...

  8. C# 在webapi项目中配置Swagger

    这篇文章已经过时了,新的主要配置一个就行了,请参照:http://www.cnblogs.com/alunchen/p/7397396.html Swagger是非常流行用于编辑api给前端同事用.或 ...

  9. Deformable Convolutional Network

    Deformable conv赋予了CNN位置变换的能力,与普通卷积的对比如下.可以看到,在每个特征点上,会产生一个偏移,变成 不规则的卷积(感觉本质上,就是让CNN自己去学习感受野). 思想来源于S ...

  10. java----Maven

    下载地址 http://maven.apache.org/download.cgi 介绍 bin:运行脚本 windows 输入mvn可以运行这些脚本 boot:包含一个类加载器的框架,maven使用 ...