本文介绍如何在网页中实现兼容IE和Chrome浏览器的文本复制功能。针对IE浏览器,利用document.execCommand("Copy")命令配合select方法实现;针对Chrome等现代浏览器,通过引入ZeroClipboard库解决安全限制问题。文章提供了完整的HTML与JavaScript代码示例,帮助开发者解决跨浏览器复制粘贴的兼容性问题。
IE浏览器下的文本复制实现
IE浏览器JavaScript实现方案:
具体代码示例如下:
<script type="text/javascript">
function copyUrl2()
{
var Url2=document.getElementById("biao1");
Url2.select(); // 选中文本内容
document.execCommand("Copy"); // 调用浏览器内置复制功能
alert("已复制好,可贴粘。");
}
</script>
<textarea cols="20" rows="10" id="biao1">用户定义的代码区域</textarea>
<input type="button" onClick="copyUrl2()" value="点击复制代码" /> Chrome及现代浏览器的兼容方案
Chrome浏览器JavaScript实现方案:
具体代码示例如下:
<script src="http://www.weicaiyun.com/assets/js/copy/ZeroClipboard.js"></script>
<script type="text/javascript">
var clip = new ZeroClipboard.Client();
clip.setHandCursor( true );
clip.setText('复制内容');
clip.glue('button');
</script>
<input type="button" id="button" value="点击复制代码" />