复制是一个使用频率特别高的操作，在网页中，一般可以选中要复制的内容，使用快捷键ctrl+c 将内容复制到剪贴板。除了使用系统提供的快捷方式复制网页内容，我们还可以用JS实现复制，这得益于document的execCommand('copy') 命令。
我们可以通过表单元素的select()方法选中内容，表单元素因为textarea限制少于input，所以推荐使用textarea。我们可以动态创建一个textarea元素，将textarea的value属性值设置为上面的innerText属性值，再执行textarea的select方法选中。
上面实现了选中，下面就可以实现复制功能了。
最后一步就可以用execCommand('copy')实现复制了，它可以复制浏览器中选中的文本，比如说上面被textarea选中的文本，复制之后记得移除textarea。
第二步和第三步可以优化一下，创建一个copy函数，函数参数设置为第一步需要复制的文本，返回值为复制的结果。
完整JS示例如下：
使用示例
可以将上面的完整JS示例写入一个JS文件，将JS文件引入HTML中，通过JS点击事件来执行复制函数。
1、最基本的复制Java代码
<script language="JavaScript">
function readTxt()
{
alert(window.clipboardData.getData("text"))
}
function setTxt()
{
var t=document.getElementById("txt")
t.select()
window.clipboardData.setData('text',t.createTextRange().text)
}
</script>
<input name="txt" value="测试">
<input type="button" value="复制" onclick="setTxt()">
<input type="button" value="读取" onclick="readTxt()">
2、扩展复制：复制表格
Java代码
<INPUT TYPE="button" value="选中测试表格" onclick="CopyTable()">
测试
<TABLE border="1" id="oTable">
<TR>
<TD>测试表格</TD>
<TD>测试表格</TD>
</TR>
<TR>
<TD>测试表格</TD>
<TD>测试表格</TD>
</TR>
</TABLE>文字
<SCRIPT LANGUAGE="JavaScript">
<!--
function CopyTable()
{
var txt = document.body.createTextRange()
txt.moveToElementText(document.getElementById('oTable'))
txt.select()
}
//-->
</SCRIPT>
、兼容IE，firefox等浏览器的复制
Java代码
<script>
function copyToClipboard(txt) {
if(window.clipboardData) {
window.clipboardData.clearData()
window.clipboardData.setData("Text", txt)
} else if(navigator.userAgent.indexOf("Opera") != -1) {
window.location = txt
} else if (window.netscape) {
try {
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect")
} catch (e) {
alert("被浏览器拒绝！\n请在浏览器地址栏输入'about:config'并回车\n然后将'signed.applets.codebase_principal_support'设置为'true'")
}
var clip = Components.classes['@mozilla.org/widget/clipboard1'].createInstance(Components.interfaces.nsIClipboard)
if (!clip)
return
var trans = Components.classes['@mozilla.org/widget/transferable1'].createInstance(Components.interfaces.nsITransferable)
if (!trans)
return
trans.addDataFlavor('text/unicode')
var str = new Object()
var len = new Object()
var str = Components.classes["@mozilla.org/supports-string1"].createInstance(Components.interfaces.nsISupportsString)
var copytext = txt
str.data = copytext
trans.setTransferData("text/unicode",str,copytext.length*2)
var clipid = Components.interfaces.nsIClipboard
if (!clip)
return false
clip.setData(trans,null,clipid.kGlobalClipboard)
}
}
</script>
<button onclick="copyToClipboard('你好！')">复制文本“你好！”</button>
<textarea id="test"></textarea>
您好！很高兴为您答疑！您可以参考下面的代码：
<script>
function copyToClipboard()
{
var d = document.all("source").value
window.clipboardData.setData('text', d)
}
</script>
<BODY>
<button onclick="copyToClipboard()">拷贝</button>
<input type="text" size=20 id="source" value="测试数据">
<br>
<button onclick="alert(window.clipboardData.getData('text'))">显示</button>
<button onclick="window.clipboardData.clearData('text')">清空</button>
</BODY>
您可以在火狐社区了解更多内容。希望我的回答对您有所帮助，如有疑问，欢迎继续在本平台咨询。
