本文介绍如何在IE与Firefox浏览器中实现代码复制功能。由于Firefox原生不支持innerText属性,通过利用textarea作为内容载体,并结合特定的JavaScript处理逻辑,可有效解决跨浏览器兼容性问题,实现完美的代码复制体验。
兼容IE与Firefox的JS复制代码实现
<div> [点击复制1] <textarea rows=2 id="txtTestCode1" style="width:500px;font-family: Verdana, Arial;font-size:12px;height:55px;border:1px solid #999999;">复制内容1</textarea> </div> <div> [点击复制2] <textarea rows=2 id="txtTestCode2" style="width:500px;font-family: Verdana, Arial;font-size:12px;height:55px;border:1px solid #999999;">复制内容2</textarea> </div> <div> [点击复制3] <textarea rows=2 id="txtTestCode3" style="width:500px;font-family: Verdana, Arial;font-size:12px;height:55px;border:1px solid #999999;">复制内容3</textarea> </div> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
该方案主要利用textarea元素作为内容载体。若使用div等元素,直接获取网页标记需依赖innerText属性,但Firefox浏览器原生不支持该属性。因此,需额外处理以使Firefox支持innerText,从而实现完美的跨浏览器复制功能,具体实现可参考本站相关功能代码。
下一篇文章我们将介绍如何让firefox支持innerText的实现代码。