复制文本到粘贴板 (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 ...
随机推荐
- 统计学习导论(ISLR)(三):线性回归(超详细介绍)
统计学习导论(ISLR) 参考资料: The Elements of Statistical Learning An Introduction to Statistical Learning 统计学习 ...
- c中遍历lua的表
//遍历lua表,index为表在栈中的位置 void traverse_table(lua_State* L, int index) { lua_pushnil(L); stack_dump(L); ...
- mysql两表关联
mysql两表关联 是按照范围关联表 select * from ((select u.id,u.name,u.sex,s.street_name,u.street_code,u.birthday f ...
- vue v-for 使用
html <div> <el-button @click="addListItem" type="primary" style="p ...
- 利用Canal投递MySQL Binlog到Kafka
https://www.aboutyun.com/thread-27654-1-1.html https://www.cnblogs.com/bigdatalearnshare/p/13832709. ...
- UnityAndroid 获取根目录文件
1. 在Unity打包时获取SD权限 2. Android根目录为 "/storage/emulated/0"; 代码: if (Directory.Exists("/s ...
- 【SQL Server】获取表格插入的id(二)——newID()
现在有一个需求,插入api调用日志表.然后,发起HTTP请求()请求时,需要带入日志表的id). 简化无关的添加,SQL Server表格设计如下: CREATE TABLE mylog ( id I ...
- The operation was rejected by your operating system.
我在新项目开启的时候使用npm install来初始化前端代码的开发环境 但是遇到一个问题,一直报: The operation was rejected by your operating syst ...
- How to use lspci, lsscsi, lsusb, and lsblk to get Linux system devices information
There are many utilities available to check Linux system hardware information. Some commands report ...
- 第三阶段Blog
题目集7~9的总结性Blog 1.前言 一个月又过去了,又到了写blog的时候,相较于前两次Blog,这一次所要分析的内容从原先的侧重于类设计到了这次的侧重于结构设计.在完成作业的时候,尽管题目内提供 ...