复制文本到粘贴板 (vue3)(兼容ios)
// 点击复制到剪贴板
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)的更多相关文章
- JavaScript实现点击复制按钮复制文本框的内容,兼容IOS
<lable> <input type="text" id="txt"> <a href="javascript:;&q ...
- js插件实现点击复制内容到粘贴板,兼容IE8
先来看下本次需要导入的文件: 第一个是jquery.js,这个不多说: 第二个是jquery.zclip.js,第三个是zeroClipboard.swf ,这两个文件的下载链接:http://www ...
- 原生js实现复制文本到粘贴板
项目中经常会遇到点击按钮复制订单号.订单id等内容到粘贴板中的需求.可是通常我们都是用Ctrl + c或右击复制的,别操心,js也是有复制命令的,那就是document.execCommand('co ...
- js 复制文本到粘贴板
//html 在iOS Safari中,剪贴板API有一些限制(实际上是安全措施): 于安全原因,iOS Safari只允许容器中的document.execCommand('copy')文本co ...
- JS复制文本到粘贴板,前端H5移动端点击按钮复制文本
<span id="codeNum">FTYHDSDW</span> <span class=" code-btn" id=&qu ...
- Ubuntu Vim 复制到系统粘贴板
/************************************************************************* * Ubuntu Vim 复制到系统粘贴板 * 说 ...
- js实现复制内容到粘贴板
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- js 复制文字、 复制链接到粘贴板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js点击按钮复制内容到粘贴板
复制内容到粘贴板,就是要选择需要复制的内容并执行document.execCommand("copy")命令: //复制内容到粘贴板 function copyToClipboar ...
- H5和PC实现点击复制当前文字的功能,兼容ios,安卓
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- centos6.x配置虚拟主机名及域名hosts
我们在本地安装了centos或者虚拟主机上安装了centos,主机名称默认是localhost,这样我们可以使用localhost访问我们的主机,在终端命令里默认的是[root@localhost ~ ...
- Kubernetes之Pod详解
1.Pod生命周期 pod创建 1. API Server 在接收到创建pod的请求之后,会根据用户提交的参数值来创建一个运行时的pod对象. 2. 根据 API Server 请求的上下文的元数据来 ...
- 一个严谨的STM32串口DMA发送接收机制
关键点: 1.一个半接收机制 2.一个是寄存器的操作顺序 参考链接: https://www.eet-china.com/mp/a167050.html
- jq-Grid 能折叠的表格
有一个需求是需要用jq-Grid展示一个可以折叠的表格,并且要求在页面初始化的时候就将表格折叠起来,我看了一下文档可以给列表增加 toolbar: [true, "top"],ca ...
- 【mysql练习】A,B两表结构完全一样,其中A中一些数据在B中不存在,用SQL将A表数据更新到B表中
1,创建符合条件的A,B表和数据 create table IF not EXISTS A (id int auto_increment primary key);create table IF no ...
- jmeter非GUI模式优点及实例说明
JMeter可以运行模式有两种,一种是GUI图形,另一种是命令模式运行也就是非GUI模式.两种模式的区别还是挺大的. GUI:由于是图形界面,所以在运行时会消耗很多资源,而且图形界面运行时结果是保存在 ...
- ConcurrentHashMap在Java8中的变化
增加红黑树这个存储结构 在Java8中,为什么要增加红黑树这种数据结构来进行存储,而不是全部使用链表来进行存储呢? 1.因为攻击者可以构造大量具有相同hashCode的内容,使其全部放在同一个列表中, ...
- linux挂载文件服务器
smbclient -L //192.168.1.1/ -U administrator //直接挂载 使用下面这条命令就行 sudo mount -t cifs -o username=文件服务器账 ...
- 关于zookeeper集群的理解
一.zookeeper集群节点容错性 1.在集群模式下,建议至少部署3个zk进程,或者部署奇数个zk进程.如果只部署2个zk进程,当其中一个zk进程挂掉后,剩下的一个进程并不能构成一个quorum的大 ...
- 记一次p标签内容不换行记录
p标签内容l里面如果全部是英文,那么默认是不会换行的. 需要添加word-wrap: break-word; 属性 这样就会自动换行了