前言

最终适配所有机型的方案基于clipboardjs
官网https://clipboardjs.com/

这个库由几个不同的CDN提供商托管。选择你最喜欢的:)

jsDelivr
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
cdnjs
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
RawGit
<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v2.0.0/dist/clipboard.min.js"></script>
unpkg
<script src="https://unpkg.com/clipboard@2.0.0/dist/clipboard.min.js"></script>

HTML部分按照clipboard提供的API进行编写

<input readonly="readonly" type="text" value="414" class="code"/>
<button class="btn" data-clipboard-action="copy" data-clipboard-target=".code">复制</button>

JS

    //复制
$('.btn').on('click', function(){ //这部分使用原生的复制方法
$('.code').select();
document.execCommand("copy",false,null); //这部分使用clipboardjs提供的复制方法
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
e.clearSelection();
});
alert('复制成功。'); //clipboardjs提供的复制失败的方法,进行复制失败提示
clipboard.on('error', function(e) {
alert('复制失败,请手动选择复制。');
});
})

segmentfault上其他相关分享
使用clipboard实现前端页面复制到粘贴板的功能
Vue中配合clipboard.js实现点击按钮复制内容到剪切板

H5复制粘贴双端适配的解决方案(终极版)的更多相关文章

  1. H5复制粘贴

    H5 复制粘贴 - execCommand 字数748 阅读399 评论0 喜欢0 需求:自动复制一段内容到剪切板, 让用户可以在其他客户端粘贴(发小广告做推广经常要用吧) window.clipbo ...

  2. Vim中复制粘贴缩进错乱问题的解决方案

    Vim中复制粘贴缩进错乱问题的解决方案 当你把这段缩进优美的代码直接ctrl+c,ctrl+v到Vim的时候,就会出现如下恶心的情况 可以看到,这种直接粘贴的方式会导致代码丢失和缩进错乱等情况. 解决 ...

  3. H5 APP 页面移动端适配方案

    H5 APP 页面移动端适配方案 https://segmentfault.com/a/1190000011586301 https://juejin.im/post/5cbdee71f265da03 ...

  4. h5复制粘贴板,打开APP功能

    <div class="container"> <img src="../themes/mall/img/i_red_ad4.jpg"> ...

  5. 关于Entity Framework中的Attached报错的完美解决方案终极版

    之前发表过一篇文章题为<关于Entity Framework中的Attached报错的完美解决方案>,那篇文章确实能解决单个实体在进行更新.删除时Attached的报错,注意我这里说的单个 ...

  6. vue init失败解决方案-终极版

    //由于windows系统的某方面问题,vue脚手架安装可能会出现第一证书丢失 // 报错:vue-cli · Failed to download repo vuejs-templates/webp ...

  7. 超详细讲解H5移动端适配

    前言 移动互联网发展至今,各种移动设备应运而生,但它们的物理分辨率可以说是五花八门,一般情况UI会为我们提供375尺寸的设计稿,所以为了让H5页面能够在这些不同的设备上尽量表现的一致,前端工程师就不得 ...

  8. 手淘H5移动端适配方案flexible源码分析

    移动端适配一直是一个值得探讨的问题,在业余时间我找了一些页面,查看了一些厂商对于移动端H5页面的适配方案,看到了几个典型的例子,今天就来记录一下我看到的第一个典型的例子,也是我们公司目前普通H5项目正 ...

  9. 整理h5移动端适配方案

    <使用Flexible实现手淘H5页面的终端适配>:https://github.com/amfe/article/issues/17 <再聊移动端页面的适配>:https:/ ...

随机推荐

  1. websocket原理和基于c/c++实现的websocket协议栈(更新中)

    参考: 博客1:http://blog.sina.com.cn/s/blog_bf397e780102w25k.html https://www.cnblogs.com/barrywxx/p/7412 ...

  2. Java 中线程池的 7 种创建方式!

    在 Java 语言中,并发编程都是通过创建线程池来实现的,而线程池的创建方式也有很多种,每种线程池的创建方式都对应了不同的使用场景,总体来说线程池的创建可以分为以下两类: 通过 ThreadPoolE ...

  3. Go基础知识梳理(四)

    Go基础知识梳理(四) GO的哲学是"不要通过共享内存来通信,而是通过通信来共享内存",通道是GO通过通信来共享内存的载体. rumtime包常用方法 runtime.NumGor ...

  4. .net core 学习笔记一 Program与Startup

    一.Program文件: 1.CreateWebHostBuilder(): 构建web服务2.WebHost.CreateDefaulBuilder(): 使用默认配置,包括 1.使用了Kestre ...

  5. Linux 磁盘inode字节数占满的问题

    查看ext系列文件系统的信息 #dumpe2fs /dev/sdc1 Inode count: 65536 inode号数量 Block count: 262144 块数量 Reserved bloc ...

  6. tp5手机号验证码发送及验证

    原文链接:https://blog.csdn.net/weixin_43389208/article/details/119153323 为什么使用短信: 场景:通常在使用手机号注册时需要发送短信验证 ...

  7. phpStudy 升级 MySQL5.7

    最新在开发项目中需要使用到mysql5.7以上版本,但是phpStudy的版本是5.5,所以需要针对MySQL升级一下 步骤  1.备份原本MySQL 备份:原本phpStudy中的MySQL文件夹改 ...

  8. 【Vulnhub靶场】RED: 1

    环境准备 下载靶机导入到vmware 但是获取不到地址,可以根据我博客里的方法修改网卡来获取IP地址 信息收集 我们改好网卡之后,我们使用arp-scan命令来探测靶机的IP地址 靶机IP地址为:19 ...

  9. Linux三剑客命令使用(持续更新)

    (本文档内容部分来源于网络) awk删除文件第一列 1.采用awk awk '{$1="";print $0}' file 2.采用sed sed -e 's/[^]* //' f ...

  10. 定位一个oom问题

    当系统出现oom问题时,我们一般的定位思路是怎样的? 系统OOM常见的原因有: 1.用户态内存需求过多,资源不足: 2.大页配置不正确: 3.水位线值异常: 4.slab内存过多: 5.rcu异常: ...