使用 js 复制网页中的文本解决 web 页面、 ios 、 Android 系统互不兼容的两种方法

学习笔记 马富天 2018-10-12 15:46:24 5 0

【摘要】昨天弄了一整天的 js 复制文本兼容性问题,具体来说就是在 PC 端、IOS 手机、 Android 手机端中相互不兼容的问题,网上提供了很多种方法,但是都没有能够解决兼容性问题,本文记录一下最后找到的两种解决办法。

首先说明一下情况: js 复制文本,首页需要 select() 选中文本,然后使用 document.execCommand("Copy"); 进行复制。这些情况是不能复制的元素属性为:display:none、width:0px、height:0px

  1. <script type="text/javascript">
  2. function copyUrl2()
  3.     {
  4.         var Url2=document.getElementById("biao1").innerText;
  5.         var oInput = document.createElement('input');
  6.         oInput.value = Url2;
  7.         document.body.appendChild(oInput);
  8.         oInput.select(); // 选择对象
  9.         document.execCommand("Copy"); // 执行浏览器复制命令
  10.         oInput.className = 'oInput';
  11.         oInput.style.display='none';
  12.         alert('复制成功');
  13.     }
  14. </script>
  15. <div cols="20" id="biao1">12345678</div>
  16. <input type="button" onClick="copyUrl2()" value="点击复制代码" />

方法一,使用 clipboard.js 进行复制,以下是完整可用的代码,在 iphone 4 下面测试不能复制(备注:可能是我的 iphone 4 太久了),其它环境下面测试都 ok :

  1. <meta charset="utf-8">
  2. <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  3. <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
  4. <input name="content" id="content" value="这里是需要复制的内容">
  5. <button class="btn btn-sm btn-purple" id="copybtn" data-clipboard-action="copy" data-clipboard-target="#content">复制</button>
  6. <script>
  7. 	var clipboard = new ClipboardJS('#copybtn');
  8.     clipboard.on('success', function(e) {
  9.         alert('复制成功');
  10.     });
  11.     clipboard.on('error', function(e) {
  12.         alert('复制失败');
  13.     });
  14. </script>

在部分安卓手机上面会提示 "复制失败",但是还是能够复制上。

方法二,使用原始 js 进行操作,以下代码本人亲测可用,并解决了复制后会对文本进行选中 / 输入法弹出这一大问题:

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
  6. 	</head>
  7. 	<body>
  8. 		<div class="copy-font">
  9. 		    <div class="uuid-code" id="content">www.mafutian.net</div>
  10. 		    <button class="btn-copy" id="copyBT">复制</button>
  11. 		</div>
  12. 		<script type="text/javascript">
  13. 		    function copyArticle(event) {
  14. 		        const range = document.createRange();
  15. 		        range.selectNode(document.getElementById('content'));
  16. 		        const selection = window.getSelection();
  17. 		        if(selection.rangeCount > 0) selection.removeAllRanges();
  18. 		        selection.addRange(range);
  19. 		        document.execCommand('copy');
  20. 		        alert("复制成功!");
  21. 		    }
  22. 		    document.getElementById('copyBT').addEventListener('click', copyArticle, false);
  23. 		</script>
  24. 	</body>
  25. </html>
这个呢,以下是 css 样式:

即将改元素设置成透明就行啦(备注:所有浏览器都支持 opacity 属性)。

推荐使用方法二。那么我们要我隐藏

  1. <div class="uuid-code" id="content">www.mafutian.net</div> 

这个呢,以下是 css 样式:

  1. .uuid-code
  2. {
  3. 	opacity:0;
  4. }

即将改元素设置成透明就行啦(备注:所有浏览器都支持 opacity 属性)。

版权归 马富天PHP博客 所有

本文标题:《使用 js 复制网页中的文本解决 web 页面、 ios 、 Android 系统互不兼容的两种方法》

本文链接地址:http://www.mafutian.net/377.html

转载请务必注明出处,小生将不胜感激,谢谢! 喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^

0

0

上一篇《 使用 PHP 程序自动检测并处理 UTF-8 文件中包含有的 BOM 头 》 下一篇《 前端稳定、免费、快速开源项目 CDN —— BootCDN 介绍 》

暂无评论

评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码

TOP10

  • 浏览最多
  • 评论最多