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

注释: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. P1982 [NOIP2013 普及组] 小朋友的数字 题解

    目录 简单版 题目 code 本题 code 简单版 先要会做这道题 题目 P1115 最大子段和https://www.luogu.com.cn/problem/P1115 这道题其实是动态规划,d ...

  2. Pycharm实现sqlite数据库可视化

  3. 基础篇之Markdown基础语法

    标题 1. # + 空格 + 标题名字 → 一级标题 2. ## + 空格 + 标题名字 → 二级标题 3. ### + 空格 + 标题名字 → 三级标题 ...... 6.###### + 空格 + ...

  4. el-dialog 嵌套子组件数据不刷新

    <!-- 展示通道测量值 -->     <el-dialog :title="analogTitle" :visible.sync="analogOp ...

  5. tidb配置haproxy

    1.安装haproxy wget https://www.haproxy.org/download/2.6/src/haproxy-2.6.2.tar.gz make clean make -j 8  ...

  6. Mybatis实现树状结构查询

    1.实体类 @Data public class CourseChapterVO implements Serializable { private static final long serialV ...

  7. windows 系统的端口问题

    netstat -ano 列出所有正在使用的端口netstat -aon|findstr "4300" 查询占用该端口的PIDtasklist|findstr "4464 ...

  8. 同一系统开启两个ftp进程

    1.正常情况是yum 安装vsftpd服务 ,在/etc/vsftpd目录更改配置,起服务.这样启动是一个服务. 2.启动第二个vsftpd服务 #创建虚拟用户 useradd -d /home/vi ...

  9. CSR,SSR,PreRender原理解密

    CSR.SSR.Prerender 原理全解密   做前端的同学们肯定或多或少听说过CSR,SSR,Prerender这些名词,但是大多肯定只是停留在听说过,了解过,略懂一点,但是,你真的理解这些技术 ...

  10. js基础篇--对象

    一.创建对象 对象直接量和 new Object (构造函数)与  Object.create 创建对象的区别 1.对象直接量和 new Object (构造函数)  原型都是Object 的 pro ...