★→ASP程序学习群:62655404 微信公众号开发
订阅本栏目 RSS您所在的位置: 深山工作室 > 页面特效 > 正文

兼容pc、移动端用js实现复制内容到剪切板(支持苹果safari浏览器)

 2020/1/18 20:42:10  字体:  浏览 6317 我要评论
需要定制网站程序、公众号程序、微信小程序可以联系:565449214或者加微信13961347334(备注:需要技术)
或者在处理一些技术问题时,有什么不懂的地方,随时可以加我QQ:565449214讨论技术或者加QQ群62655404讨论
当前标签
复制

纯javascript实现复制文本并提示复制成功兼容PC端,移动端,适用所有浏览器,直接放项目就能用。


代码如下:

<a onclick="copyTxt('这是要复制的内容')">点击复制</a>
js:

<script>
//原生js实现复制内容到剪切板,兼容pc、移动端(支持Safari浏览器)
function copyTxt(text){
if(typeof document.execCommand!=="function"){
alert("复制失败,请长按复制");
return;
}
var dom = document.createElement("textarea");
dom.value = text;
dom.setAttribute('style', 'display: block;width: 1px;height: 1px;');
document.body.appendChild(dom);
dom.select();
var result = document.execCommand('copy');
document.body.removeChild(dom);
if (result) {
alert("复制成功");
return;
}
if(typeof document.createRange!=="function"){
alert("复制失败,请长按复制");
return;
}
var range = document.createRange();
var div=document.createElement('div');
div.innerHTML=text;
div.setAttribute('style', 'height: 1px;fontSize: 1px;overflow: hidden;');
document.body.appendChild(div);
range.selectNode(div);
const selection = window.getSelection();
if (selection.rangeCount > 0){
selection.removeAllRanges();
}
selection.addRange(range);
document.execCommand('copy');
alert("复制成功")
}
</script>

相关阅读
( 2021/5/11 18:58:19 )uni-app里面复制内容时保留换行利用正则替换br标签替换成回车换行符
( 2021/2/5 21:47:30 )uni-app按钮button利用css伪类after去除灰色边框
( 2020/12/16 22:20:58 )微信小程序转uni-app项目
( 2020/9/15 15:20:52 )uni-app实现上拉加载,下拉刷新(下拉带动画)
( 2014/9/20 22:17:36 )用于深山在线投票的一个javascript统计checkbox现在选中的个数一边点复选框一边验证并计算现在选了多少个复选框
( 2014/9/15 16:09:32 )利用javascript简短功能就可以检查form表单中的元素是否已经填写
( 2014/9/11 20:43:31 )用javscript实现为表格的每一行自动加上序号
( 2014/9/10 9:14:15 )鼠标放在表格区域内,当前格的一整行和一整列变色
共有0条关于《兼容pc、移动端用js实现复制内容到剪切板(支持苹果safari浏览器)》的评论
发表评论
正在加载评论……
返回顶部发表评论
呢 称:
表 情:
内 容:
评论内容:不能超过 1000 字,需审核,请自觉遵守互联网相关政策法规。
验证码: 验证码 
深山工作室网友评论声明,请自觉遵守互联网相关政策法规。

您发布的评论即表示同意遵守以下条款:
一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家、社会、集体和公民的合法权益;
二、不得发布国家法律、法规明令禁止的内容;互相尊重,对自己在本站的言论和行为负责;
三、本站对您所发布内容拥有处置权。

更多信息>>栏目类别选择
uni-app
rss学习
个人空间
网站设计
网站公告
下载
photoshop学习
ASP学习
DIV+CSS学习
SEO搜索引擎忧化
java学习
HTML学习
网站信息
网站类信息
更多>>同类信息
canvas绘制的文字如何换行
做在线客服时,聊天窗口的div滚动条始终在底部
javascript编写的网页版的打字测试程序
JS+CSS实现图片放大预览效果(购物时放在产品上面预览图片)
支持火狐,IE6.ie7.ie8.ie9的加入收藏/设为首页代码
javascript在a标签中的一些操作
javascript自动获取Tags关键字
javascript自动获取Tags关键字
更多>>最新添加文章
uni-app开发表单input组件的一些规则说明自己预留使用
查询某个字符在字符串中出现的位置数组
百度小程序开发第一坑tcomponent自定义组件命名坑Compile san component failed. . [SAN ERROR] ROOT>swan-custom-component>view>千万不要用下划线作为自定义组件名
开始百度小程序开发需要准备工作
uni-app:使用uni.downloadFile下载word或pdf文件并保存到手机
小程序中利用addPhoneContact将联系人的信息添加到手机通讯录支持保存联系人头像
小程序打开pdf文件并保存到本地 支持远程pdf、word、xls表格文件打开
uni-app里面复制内容时保留换行利用正则替换br标签替换成回车换行符
更多>>随机抽取信息
了解html基础知识之html标签集合
uni-app基础知识使用hidden条件显示
深山行者留言系统V2.3
禁止网站的静态模板被下载
增大、缩小、还原字体
一个非常不错的程序编辑工具--PSPad editor
旅行社管理系统商业版4.0发布
ASP导出WORD或Excel文档(比较另类,而且超级强的。)