js兼容安卓和IOS的复制文本到剪切板，已做浏览器兼容处理，勿需插件

开发需求：手机端，点击按钮实现需复制的文本内容；
案例已做手机端浏览器兼容处理经测试，[QQ，微信，苹果，360，UC等]，可正常使用；

案例代码如下：****（使用时：请调试到手机模式）

案列1：单个复制


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="screen-orientation" content="portrait"><meta name="format-detection" content="telephone=no"><meta name="browsermode" content="application"><meta name="x5-page-mode" content="app"><title>手机端文案复制</title><style>body{ max-width: 640px; margin: 0 auto;}.copy-pp{ color: #666; line-height: 1.2;}.copy-btn{ background-color: cornflowerblue; color: #fff;}.copy-text{ opacity: 0;}</style>
</head>
<body><!--使用时：请调试到手机模式：--><div class="copy-pp" id="copy-pp">即使是一块牛肉，也应该有自己的态度，要慎其独，要善其身，要知道精彩的人生不能只有精肉，还要有适宜的肥油做调配，有雪白的肉筋做环绕，并且还要掌握跳进煎锅时的角度，姿势，以及火候，才能最终成为一块优秀道地的西冷牛排~
</div><button type="button" class="copy-btn" id="copy-btn" onclick="jsCopy(this)">点击复制分享链接</button><textarea class="copy-text" id="copy-text" value="" readonly="readonly"></textarea><script>function jsCopy(obj){var u = navigator.userAgent;//苹果if (u.match(/(iPhone|iPod|iPad);?/i)) {var copyDOM = document.getElementById("copy-pp");  //要复制文字的节点var range = document.createRange();// 选中需要复制的节点range.selectNode(copyDOM);// 执行选中元素window.getSelection().addRange(range);// 执行 copy 操作var successful = document.execCommand('copy');try {var msg = successful ? '成功' : '失败';console.log(msg);} catch(err) {console.log(err);}// 移除选中的元素window.getSelection().removeAllRanges();obj.innerHTML = '已复制';}// 安卓if(u.indexOf('Android') > -1 ){var $copyText = document.getElementById("copy-text"),$copyPP = document.getElementById("copy-pp");$copyText.innerHTML = $copyPP.innerHTML.replace(/<[^>]+>/g,"");$copyText.select(); // 选择对象document.execCommand("Copy"); // 执行浏览器复制命令obj.innerHTML = '已复制';}// 安卓系统的UC浏览器if(u.indexOf('Android') > -1 && u.indexOf('UCBrowser') > -1){obj.innerHTML = '点击复制分享链接';alert('若点击复制分享链接无效，请长按内容手动复制！');}}
</script></body>
</html>

案列2：多个复制

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="screen-orientation" content="portrait"><meta name="format-detection" content="telephone=no"><meta name="browsermode" content="application"><meta name="x5-page-mode" content="app"><title>手机端文案复制</title><style>body{ max-width: 640px; margin: 0 auto;}ul,li{ list-style: none; padding: 0; margin: 0;}.copy-demo{ width: 100%; height: auto; overflow: hidden;}.li{ padding: 20px; border-bottom: 1px solid #f0f0f0; overflow: hidden;}.copy-pp{ color: #666; line-height: 1.2;}.copy-btn{ background-color: cornflowerblue; color: #fff;}.copy-text{ opacity: 0;}</style>
</head>
<body><!--使用时：请调试到手机模式：--><!--copy-demo-->
<section class="copy-demo"><ul class="ul"><li class="li"><div class="copy-pp" >1.上得了厅堂，下得了厨房，杀得了木马，翻得了围墙，开得了汽车，买得起洋房，斗得了小三，打得赢流氓。</div><button type="button" class="copy-btn js-copy-btn">点击复制文字</button><textarea class="copy-text" value="" readonly="readonly"></textarea></li><li class="li"><div class="copy-pp" >2.人的一生都会扮演很多角色，如果你不高兴，你可以把剧本扔了。不过记住，有一份剧本是真真属于你的，千万别丢错了。</div><button type="button" class="copy-btn js-copy-btn">点击复制文字</button><textarea class="copy-text" value="" readonly="readonly"></textarea></li><li class="li"><div class="copy-pp" >3.现在演戏的都去唱歌了，唱不了歌的都去写书了，写不了书的都去演戏了，演不了戏的就又去唱歌了。演艺圈是个圈嘛。</div><button type="button" class="copy-btn js-copy-btn">点击复制文字</button><textarea class="copy-text" value="" readonly="readonly"></textarea></li></ul>
</section><script type="text/javascript">// 复制文案功能:const jsCopy = function(obj) {function fn() {var u = navigator.userAgent;//苹果if (u.match(/(iPhone|iPod|iPad);?/i)) { //ios//   alert('苹果啊');//要复制文字的节点var copyDOM = obj.parentNode.children[0];var range = document.createRange();// 选中需要复制的节点range.selectNode(copyDOM);// 执行选中元素window.getSelection().addRange(range);// 执行 copy 操作var successful = document.execCommand('copy');try {var msg = successful ? 'successful' : 'unsuccessful';console.log('copy is' + msg);} catch(err) {console.log('Oops, unable to copy');}// 移除选中的元素window.getSelection().removeAllRanges();obj.innerHTML = '已复制'}// 安卓if(u.indexOf('Android') > -1 ){//alert('安卓啊');var $copyPP = obj.parentNode.children[0],$copyText = obj.parentNode.children[2];$copyText.innerHTML = $copyPP.innerHTML.replace(/<[^>]+>/g,"");$copyText.select(); // 选择对象document.execCommand("Copy"); // 执行浏览器复制命令obj.innerHTML = '已复制';}// 安卓系统的UC浏览器if(u.indexOf('Android') > -1 && u.indexOf('UCBrowser') > -1){obj.innerHTML = '点击复制文案';alert('若点击复制文案无效，请长按内容手动复制！');}}obj.addEventListener('click', fn, false);};//let copyBtns = document.querySelectorAll('.js-copy-btn');copyBtns.forEach((obj) => {jsCopy(obj);});
</script>

ps:
js复制页面内容-图片文字-插件clipboard.js
vue-仿淘宝收货地址，设置默认地址

源码会持续更新到公众号，需要可以关注一下哦…

js兼容安卓和IOS的复制文本到剪切板，已做浏览器兼容处理，勿需插件相关推荐

html5 js 手机剪切板,JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)...
新学习JavaScript,就碰到这么一个需求,几乎网上的方法都试过了.写出了总结下使用的方法:clipboard 插件下载地址:https://github.com/zenorocha/clipb ...
Cocos2dx 复制文本到剪切板（Android 和 ios）
Cocos2dx 复制文本到剪切板(Android 和 ios) 至于c++调用java lua调用java 等方法这里不介绍了.下面本人真机亲测.如果有问题请留言交流. 1.Android 实现方式 ...
js 复制图片到剪切板和 js复制文本到剪切板
js 复制图片到剪切板 <a href="javascript:;" id="copyQrcode" data-base=""> ...
JS复制文本到剪切板
// 是否支持复制 export const isSupportCopy = ((!!document.queryCommandSupported) && document.query ...
js 复制文本到剪切板 document.execCommand(“copy“)
本函数的原理是调用document.execCommand的copy命令 document.execCommand("copy")对不同浏览器的兼容性不同,详情请在这里参考函数: ...
html复制文字兼容手机,JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)...
新学习JavaScript,就碰到这么一个需求,几乎网上的方法都试过了.写出了总结下使用的方法:clipboard 插件下载地址:https://github.com/zenorocha/clipb ...
微信小游戏复制文本到剪切板（JavaScript代码实现）
微信小游戏复制文本到剪切板(JavaScript代码实现) 前言: 正文: 结尾前言: 我们在小游戏开发的时候经常会有一些需求,例如查询好友,或者切换到微信搜索微信公众号引流,这时候一般都会需要提供 ...
微信小程序点击复制文本至剪切板
只需要在点击事件内使用 wx.setClipboardData这个API即可 wx.setClipboardData({data: '_______',//需要复制的内容success: functi ...
android 复制字符串,Cocos2dx 复制文本到剪切板（Android 和 ios）
ClipboardManager cm = (ClipboardManager) getSystemService(Context.CLIPBOARD_SERVICE); cm.setText(要复制 ...

js兼容安卓和IOS的复制文本到剪切板，已做浏览器兼容处理，勿需插件

案列1：单个复制

案列2：多个复制

js兼容安卓和IOS的复制文本到剪切板，已做浏览器兼容处理，勿需插件相关推荐

最新文章

热门文章