网页中文本复制的两种方法

原创 2004年08月30日 16:57:00

适用于: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">
&lt;TABLE cellSpacing=1 cellPadding=1 width="75%" border=1&gt;
&lt;TR&gt;
&lt;TD&gt;&lt;/TD&gt;
&lt;TD&gt;&lt;/TD&gt;
&lt;TD&gt;&lt;/TD&gt;&lt;/TR&gt;
&lt;TR&gt;
&lt;TD&gt;&lt;/TD&gt;
&lt;TD&gt;&lt;/TD&gt;
&lt;TD&gt;&lt;/TD&gt;&lt;/TR&gt;
&lt;TR&gt;
&lt;TD&gt;&lt;/TD&gt;
&lt;TD&gt;&lt;/TD&gt;
&lt;TD&gt;&lt;/TD&gt;&lt;/TR&gt;&lt;/TABLE&gt;
</textarea>
</div>
<p><input name="btnCopy" type="button" id="btnCopy" onclick="window.clipboardData.setData('Text',inbuiltCodeByText.value)" value="Copy Text">
&nbsp;&nbsp;<input name="btnSelect" type="button" id="btnSelect" onclick="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" oncopy="window.clipboardData.setData('Text',this.innerText)">
 <span style="color:red">&lt;TABLE cellSpacing=1 cellPadding=1 width=&quot;75%&quot; border=1&gt;</span><br>
 &lt;TR&gt;<br>
 &lt;TD&gt;&lt;/TD&gt;<br>
 &lt;TD&gt;&lt;/TD&gt;<br>
 &lt;TD&gt;&lt;/TD&gt;&lt;/TR&gt;<br>
 &lt;TR&gt;<br>
 &lt;TD&gt;&lt;/TD&gt;<br>
 &lt;TD&gt;&lt;/TD&gt;<br>
 &lt;TD&gt;&lt;/TD&gt;&lt;/TR&gt;<br>
 &lt;TR&gt;<br>
 &lt;TD&gt;&lt;/TD&gt;<br>
 &lt;TD&gt;&lt;/TD&gt;<br>
 &lt;TD&gt;&lt;/TD&gt;&lt;/TR&gt;&lt;/TABLE&gt;
</div>
<p>
&nbsp;<input type="button" value="Copy Text Code" id="btnCopyText" onclick="window.clipboardData.setData('Text',inbuiltCodeByDiv.innerText)">
&nbsp;&nbsp;<input type="button" value="Copy HTML Code" id="btnCopyHTML" onclick="window.clipboardData.setData('Text',inbuiltCodeByDiv.innerHTML)">
&nbsp;&nbsp;<input type="button" value="Select Text" id="btnSelectText" onclick="var cr=document.body.createTextRange();cr.moveToElementText(document.getElementById('inbuiltCodeByDiv'));cr.select()">
</p>
</body>
</html>

这段代码演示了一个存放在div中table html代码,第一行设置为红色,还提供有三个按钮来处理复制文本,复制html和选择文本。对于不使用按钮复制的,我们通过div的oncopy事件来改变剪贴板文本。

本文主要介绍了不同于textarea的网页复制文本的存放对象的使用方法,测试代码在ie5.x及之上通过,对于其他厂商的浏览器,上述代码不支持。

Python文本数据分析

-
  • 1970年01月01日 08:00

对html页面中text元素进行复制

一,全选功能。 text元素里的复制和全选没有关系,即,可以在没有选中的操作下进行复制。这里介绍的是在 区域点击一下即可全选的功能。 (function(){ $('#html_...
  • xinxintai
  • xinxintai
  • 2011-11-28 20:51:34
  • 4067

在浏览器中实现复制内容到剪切板中

前端开发时, 经常有这种功能, 需要把网页中的有些内容复制到剪切板中。 针对IE浏览器来说, 实现起来就很简单, 因为直接有clipboardData 的对象可以使用, 但是对于其他浏览器来说, 并没...
  • oscar999
  • oscar999
  • 2016-06-21 14:03:51
  • 6652

C# 打开文本文件,剪切文本,复制文本,粘贴文本方法

private void menuItem2_Click(object sender, System.EventArgs e)        {//打开文本文件            this.ope...
  • xiaoxiaohai123
  • xiaoxiaohai123
  • 2007-06-26 18:00:00
  • 2329

HTML笔记(网页文本)

一、标题 h1、h2…h6标签定义标题,级别逐渐递减 h1只能够使用一次,其他可反复使用。 若h2作为副标题则只能使用一次 二、段落文本 标签定义段落文本,前后会有一段空白。 三、引用文本...
  • The_Light_
  • The_Light_
  • 2018-02-07 17:25:57
  • 56

在网页中添加富文本编辑器——UEditor的使用

利用百度公司的开源项目UEditor实现在jsp页面中加入富文本编辑功能
  • u013350866
  • u013350866
  • 2017-09-01 17:09:12
  • 2835

C#将文本写入剪贴板

 System.Windows.Forms.Clipboard.SetText("写入"); 
  • ltolll
  • ltolll
  • 2006-10-24 17:33:00
  • 2317

网页怎么实现文本框内容复制到剪贴板

前段时间,老板要求做一个网页实现文本框内容复制到剪贴板的功能,我找了些实现这个功能的技术资料,都只支持IE和Firefo(火狐),这是因为flash 10更新后,网页文本框内容复制到剪贴板兼容所有浏览...
  • wuheas
  • wuheas
  • 2011-01-15 16:12:00
  • 1368

C#实现网页内容正文抓取

C#实现网页内容正文抓取.net
  • u013010416
  • u013010416
  • 2014-04-03 15:22:11
  • 3789

C#---HTML 转文本及HTML内容提取

//1、HTML直接转文本 //使用方法 HtmlToText convert = new HtmlToText(); textBox2.Text = convert.Convert(textB...
  • cjh200102
  • cjh200102
  • 2011-09-27 09:43:01
  • 10406
收藏助手
不良信息举报
您举报文章:网页中文本复制的两种方法
举报原因:
原因补充:

(最多只允许输入30个字)