JS实现内容复制功能

JavaScript019

JS实现内容复制功能,第1张

复制是一个使用频率特别高的操作，在网页中，一般可以选中要复制的内容，使用快捷键 ctrl+c 将内容复制到剪贴板。除了使用系统提供的快捷方式复制网页内容，我们还可以用JS实现复制，这得益于document的 execCommand('copy') 命令。 实现整个复制功能，需要以下三个步骤： 大部分HTML元素都有innerText和innerHTML两个属性，innerText属性返回文本内容，innerHTML属性返回标签元素。我们可以创建一个函数，用于获取需要返回的内容： 上面的selectText函数接收一个DOM元素，返回DOM元素的innerText属性值。 我们可以通过表单元素的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>

把你要在wxhm中输出的内容单独的写成一个function，比如是

function test()

{return 'hello world'}

document.write(stxlwx)</script>改成document.write(test())</script>

之后你在clipboard里直接返回test()就行了