適用於：IE5.X及之上版本
在某些情況下，我們希望在我們網頁中的一些文字很方便的提供給用戶複製的功能。比如你的編寫了一個HTML或者C#的教程，放到你的個人網頁上，其中有些源代碼可以讓用戶直接複製，如果你把代碼直接寫成到一個<P>或者<DIV>當中，當用戶複製了你的網頁中的代碼，在某些編輯器裏，你提供的代碼會帶有HTML的標籤，這是因爲網頁文本的複製是HTML代碼的複製。
爲了解決這個問題，通常我們採用下面的方法。
一、使用TextArea存放複製文本
由於從網頁的Form對象中複製的文本是不轉成HTML代碼的純文本，所以通常情況下，網頁中
的複製文本都採用TextArea來存放。下面提供了例子，代碼如下：
TextAreaTest.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Text Area Test</title>
</head>
<body>
<textarea id="inbuiltCodeByText" readonly="true" style="BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; BORDER-LEFT: #000 1px solid; WIDTH: 100%; BORDER-BOTTOM: #000 1px solid; HEIGHT: 10em">
<TABLE cellSpacing=1 cellPadding=1 width="75%" border=1>
<TR>
<TD></TD>
<TD></TD>
<TD></TD></TR>
<TR>
<TD></TD>
<TD></TD>
<TD></TD></TR>
<TR>
<TD></TD>
<TD></TD>
<TD></TD></TR></TABLE>
</textarea>
</div>
<p><input name="btnCopy" type="button" id="btnCopy" οnclick="window.clipboardData.setData('Text',inbuiltCodeByText.value)" value="Copy Text">
<input name="btnSelect" type="button" id="btnSelect" οnclick="inbuiltCodeByText.select()" value="Select Text">
</p>
</p>
</body>
</html>
這段html中的textarea裏存放了一段html的表格代碼，此外還提供了兩個按鈕，一個點擊之後複製textarea中的文本，一個點擊之後選擇textarea中的文本。clipboardData對象提供了一個setData方法，用來設置網頁的剪貼板中的數據。Form對象都有一個select()方法，可以用來選擇Form對象中文本或值。
textarea是很常見的存放複製文本的對象，但是如果你希望你的代碼中某些重點部分能夠加上顏色或者加重，就像程序代碼編輯器中一樣，就沒有辦法實現了，因爲textarea中的都是純文本。
我這裏有一個方法可以實現你需要的代碼效果，而且複製的文本也不帶有html標籤。
二、使用div存放複製文本
前面我們已經提到過clipboardData對象的setData方法，可以設置網頁的剪貼板中數據。將複製文本放在div中通過setData方法改變複製文本，同時div中的文本是可以設置樣式的，這就實現了我們想要得效果，下面是一個範例，代碼如下：
DivTextTest.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Div Text Test</title>
</head>
<body>
<div id="inbuiltCodeByDiv" style="BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; OVERFLOW: auto; BORDER-LEFT: #000 1px solid; WIDTH: 100%; CURSOR: text; BORDER-BOTTOM: #000 1px solid; HEIGHT: 10em" οncοpy="window.clipboardData.setData('Text',this.innerText)">
<span style="color:red"><TABLE cellSpacing=1 cellPadding=1 width="75%" border=1></span><br>
<TR><br>
<TD></TD><br>
<TD></TD><br>
<TD></TD></TR><br>
<TR><br>
<TD></TD><br>
<TD></TD><br>
<TD></TD></TR><br>
<TR><br>
<TD></TD><br>
<TD></TD><br>
<TD></TD></TR></TABLE>
</div>
<p>
<input type="button" value="Copy Text Code" id="btnCopyText" οnclick="window.clipboardData.setData('Text',inbuiltCodeByDiv.innerText)">
<input type="button" value="Copy HTML Code" id="btnCopyHTML" οnclick="window.clipboardData.setData('Text',inbuiltCodeByDiv.innerHTML)">
<input type="button" value="Select Text" id="btnSelectText" οnclick="var cr=document.body.createTextRange();cr.moveToElementText(document.getElementById('inbuiltCodeByDiv'));cr.select()">
</p>
</body>
</html>
這段代碼演示了一個存放在div中table html代碼，第一行設置爲紅色，還提供有三個按鈕來處理複製文本，複製html和選擇文本。對於不使用按鈕複製的，我們通過div的oncopy事件來改變剪貼板文本。
本文主要介紹了不同於textarea的網頁複製文本的存放對象的使用方法，測試代碼在ie5.x及之上通過，對於其他廠商的瀏覽器，上述代碼不支持。