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

原创 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及之上通过,对于其他厂商的浏览器,上述代码不支持。

点击复制按钮进行复制文本

function jsCopy(){          var e=document.getElementById("contents");//对象是contents          e.sel...
  • lml_little
  • lml_little
  • 2016年04月06日 15:03
  • 3610

复制网页上的代码的一个小技巧

作为一个程序员的学习者,经常需要多学习别人的成果,再拿来运行一下,看到有结果出来,那一刻内心是高兴的,仿佛看到了希望。        但有时候网页上的代码复制到编译器上编译运行报了一堆错误,而看着代码...
  • lingkexing
  • lingkexing
  • 2016年09月11日 17:10
  • 947

JS实现文本复制功能,兼容主流浏览器

声明:本文是经过多方搜索、整理而成,核心技术实现是转载http://peunzhang.cnblogs.com/ 最近工作很烦心,为了让自己冷静下来,开始把平时碰到的问题、知识点以博客的形式记录下来...
  • magicalol
  • magicalol
  • 2015年03月15日 19:02
  • 1446

网页禁止复制的两种方式

两种方式: 1.检测到点击复制时直接return false 2.直接禁用右键 网页禁止复制的2种方式 body .layui-...
  • Bright2017
  • Bright2017
  • 2017年03月28日 17:29
  • 451

js 复制文本的四种方式

纯 转载复制,非原创 原地址:http://www.cnblogs.com/xhyu/p/5370111.html 目前copy主流有四种方式:ZeroClipboard,Clipboar...
  • qq_32835907
  • qq_32835907
  • 2017年04月21日 09:50
  • 1928

如何解决(网页)粘贴数据到excel数据变换问题

如何解决网页粘贴数据到excel数据变换问题 首先我们获取过来的数据
  • xiyiyindie
  • xiyiyindie
  • 2016年12月27日 16:28
  • 668

使用 jQuery 复制文字到剪贴板的技巧

如果在网上找一个关于如何将一段特定的文本拷贝到剪贴板的解决方案,最可能的结果就是使用Flash的方案来做这个事,虽然使用Flash可以很好地解决这个问题,但是这不是一个明智的想法,因为这个产品最终会消...
  • clschen
  • clschen
  • 2016年04月06日 15:27
  • 3374

去除网页复制来代码的行数标号的java代码

我们经常在网页上复制来下面这样的代码,前面总加着讨厌的行号 01. import java.util.Scanner; 02. public class Main { 03. 今天我查别人代码的...
  • u010953266
  • u010953266
  • 2015年01月14日 18:00
  • 901

VIM选择文本块/复制/粘贴

linux 中vim操作的常见命令
  • Jeff_Liu_Sky
  • Jeff_Liu_Sky
  • 2016年10月04日 14:06
  • 1726

js 复制文本内容

记录工作学习中的小技巧 复制网页中的内容到剪切板上; 本文介绍两种方式,都亲身验证过哦 第一种:常规方法,但是只兼容IE浏览器与使用IE内核的浏览器。 优点是体积小,仅有十来行代码,但缺点...
  • PanRuiFang
  • PanRuiFang
  • 2015年03月24日 17:59
  • 1898
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:网页中文本复制的两种方法
举报原因:
原因补充:

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