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

最新推荐文章于 2024-08-01 10:06:21 发布

smile2me27

最新推荐文章于 2024-08-01 10:06:21 发布

阅读量3.4k

点赞数

分类专栏： Usable WEB 文章标签： html button div border 浏览器 table

本文链接：https://blog.csdn.net/smile2me27/article/details/89104

版权

Usable WEB 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

适用于：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>
</html>

这段html中的textarea里存放了一段html的表格代码，此外还提供了两个按钮，一个点击之后复制textarea中的文本，一个点击之后选择textarea中的文本。clipboardData对象提供了一个setData方法，用来设置网页的剪贴板中的数据。Form对象都有一个select()方法，可以用来选择Form对象中文本或值。

textarea是很常见的存放复制文本的对象，但是如果你希望你的代码中某些重点部分能够加上颜色或者加重，就像程序代码编辑器中一样，就没有办法实现了，因为textarea中的都是纯文本。

我这里有一个方法可以实现你需要的代码效果，而且复制的文本也不带有html标签。

二、使用div存放复制文本
前面我们已经提到过clipboardData对象的setData方法，可以设置网页的剪贴板中数据。将复制文本放在div中通过setData方法改变复制文本，同时div中的文本是可以设置样式的，这就实现了我们想要得效果，下面是一个范例，代码如下：
DivTextTest.htm