前言

最终适配所有机型的方案基于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. vue项目环境搭建(webpack4从零搭建)--仅个人记录

    一.nodejs环境搭建 首先需要下载node.js(推荐直接官网找最新的版本),下载完成后会自带npm包管理工具,打开cmd命令行界面,输入npm -v .node -v检查node.js与npm是 ...

  2. JZ-040-数组中只出现一次的数字

    数组中只出现一次的数字 题目描述 一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序找出这两个只出现一次的数字. 题目链接: 数组中只出现一次的数字 代码 /** * 标题:数组中只出现 ...

  3. C#控制打印机打印

    一.引用BarcodeStandard.dll #region BarcodeStandard.dll /* * * 使用说明 需要通过NuGet进行安装BarcodeLib.dll,必不可少 */ ...

  4. Linux网卡ifcfg-eth0配置详解

    DEVICE="eth1"                              网卡名称 NM_CONTROLLED="yes"            n ...

  5. Angular + Github action + Nginx 部署

    在常规 Web 的开发流程之中,当开发步入尾声时就需要部署应用到服务器上,Angular 部署上还算简单.经过测试,部署平均用时在5分钟左右,主要受限于 GitHub 海外服务器的网速. 一.Angu ...

  6. mysql保存emoji表情,utf8mb4保存不了表情的问题

    报错信息 : Incorrect string value: '\xF0\x9F\x99\x85\xE2\x80...' for column 'content' at row 1 mysql数据库的 ...

  7. CF416E题解

    题意:对于所有的 \((u,v)\),询问有多少条边在这两个点的最短路边集之并内. 考虑对于每一个 \(u\) 建立最短路 DAG 图,问题变成询问唯一的度数为 \(0\) 的节点到所有节点路径的并集 ...

  8. VUE3 之 列表动画 - 这个系列的教程通俗易懂,适合新手

    1. 概述 老话说的好:可以为别人解决痛点的产品就是好产品. 言归正传,今天我们来聊聊 VUE 的列表动画. 2. 列表动画 2.1  列表中增加和删除元素 <style> .my-ite ...

  9. [MySQL]MySQL8.0的一些注意事项以及解决方案

    MySQL8.0 注意事项以及解决方案 1. MySQL8.0 修改大小写敏感配置 天坑MySQL8.0! 在安装后, 便无法通过修改配置文件,重启服务,或者执行sql来更改数据库配置, 要想配置的话 ...

  10. ssm配置推荐

    1.JDK 1.8 2.Mysql 5.7 3.Maven 3.6.1