1. // 点击复制到剪贴板
  2. const copyToClipboard = (content)=> {
  3. if (window.clipboardData) {
  4. window.clipboardData.setData("text", content);
  5. } else {
  6. (function (content) {
  7. document.oncopy = function (e) {
  8. e.clipboardData.setData("text", content);
  9. e.preventDefault();
  10. document.oncopy = null;
  11. };
  12. })(content);
  13. document.execCommand("Copy");
  14. }
  15. }
  1. // 点击复制到剪贴板 (兼容ios)
  2. const copyToClipboard = (content)=> {
  3. let oInput = document.createElement("input");
  4. oInput.value = content;
  5. document.body.appendChild(oInput);
  6. oInput.select(); // 选择oInput中所有文本对象
  1. if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {//兼容ios
  2. if (!document.execCommand("Copy")) {
  3. oInput.setSelectionRange(0, oInput.value.length);
  4. }
  5. }
  6. document.execCommand("Copy"); // 执行浏览器复制命令
  7. document.body.removeChild(oInput);
  8. return new Promise((resolve,reject)=>{
  9. if (document.execCommand("Copy")) {
  10. resolve(content);
  11. }else{
  12. reject(content);
  13. }
  14. })
  15. }

注释:setSelectionRange()方法是作用在input元素上的;这个方法可以为当前元素内的文本设置备选中范围;inputElement.setSelectionRange(selectionStart, selectionEnd, [optional] selectionDirection);

复制文本到粘贴板 (vue3)(兼容ios)的更多相关文章

  1. JavaScript实现点击复制按钮复制文本框的内容,兼容IOS

    <lable> <input type="text" id="txt"> <a href="javascript:;&q ...

  2. js插件实现点击复制内容到粘贴板,兼容IE8

    先来看下本次需要导入的文件: 第一个是jquery.js,这个不多说: 第二个是jquery.zclip.js,第三个是zeroClipboard.swf ,这两个文件的下载链接:http://www ...

  3. 原生js实现复制文本到粘贴板

    项目中经常会遇到点击按钮复制订单号.订单id等内容到粘贴板中的需求.可是通常我们都是用Ctrl + c或右击复制的,别操心,js也是有复制命令的,那就是document.execCommand('co ...

  4. js 复制文本到粘贴板

    //html 在iOS Safari中,剪贴板API有一些限制(实际上是安全措施):   于安全原因,iOS Safari只允许容器中的document.execCommand('copy')文本co ...

  5. JS复制文本到粘贴板,前端H5移动端点击按钮复制文本

    <span id="codeNum">FTYHDSDW</span> <span class=" code-btn" id=&qu ...

  6. Ubuntu Vim 复制到系统粘贴板

    /************************************************************************* * Ubuntu Vim 复制到系统粘贴板 * 说 ...

  7. js实现复制内容到粘贴板

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  8. js 复制文字、 复制链接到粘贴板

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. js点击按钮复制内容到粘贴板

    复制内容到粘贴板,就是要选择需要复制的内容并执行document.execCommand("copy")命令: //复制内容到粘贴板 function copyToClipboar ...

  10. H5和PC实现点击复制当前文字的功能,兼容ios,安卓

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 94、springboot+minio实现分片上传(超大文件快速上传)

    设计由来 在实际的项目开发中常遇到超大附件上传的情况,有时候客户会上传GB大小的文件,如果按照普通的MultipartFile方式来接收上传的文件,那么无疑会把服务器给干崩溃,更别说并发操作了.于是笔 ...

  2. CF446D 题解

    题意 传送门 给定一张 \(n\) 个点 \(m\) 条边的无向图,每个节点有权值 \(v_i=\) \(0/1\).角色从节点 \(1\) 开始随机游走,走到 \(n\) 停止.求其经过路径上权值和 ...

  3. 杭电oj 求数列的和

    Problem Description 数列的定义如下:数列的第一项为n,以后各项为前一项的平方根,求数列的前m项的和.   Input 输入数据有多组,每组占一行,由两个整数n(n<10000 ...

  4. vue 在 v-for 时给每项元素绑定事件需要用事件代理吗?为什么?

    vue本身不做事件代理(react将所有事件都委托到document上,然后进行派发) 普通html元素和在组件上挂了.native修饰符的事件.最终EventTarget.addEventListe ...

  5. 搭建Spring的源码环境

    搭建Spring的源码环境,包括以下几个步骤: 1.从Spring官网一步步找到Spring源码在github上的位置,并拉取Spring源码 2.安装和配置Gradle,用于构建Spring的源码 ...

  6. memoのls

    memoのls 测试环境是Big Sur 11.2.2 在windows下都不知道cd /D E:\xxx\xxx可以直接切换盘符.今天才发现,ls命令我也不会用-- ls命令是真强大啊,之前只知道l ...

  7. Excel Vlookup用法和常见报错#REF! #Value!

    VLOOKUP(E2,$A$2:$C$5,2,FALSE) E2 为选中查找的条件 $A$2:$C$5 1为需要查找的区域,这个区域一般是固定的,所以要加上$符号 2这个区域可以在前面加上SHEET2 ...

  8. VS2012下没有ADO.NET实体数据模型

    在C盘下搜"EFTools.msi"然后退出VS,点击修复在打开VS,数据下就有了

  9. sql 错误问题

    message: ### Error querying database.  Cause: java.sql.SQLSyntaxErrorException: SELECT command denie ...

  10. uniapp项目 hbuilder工程转cli工程 hbuilder工程不可以用命令行打包

    hbuilder工程不可以用命令行打包,只能用自带的发行手动打包 cli工程可以用命令行打包,可以配置多环境 1.安装空的cli项目 vue create -p dcloudio/uni-preset ...