web上的复制

你可能曾经尝试过复制网页上的一些文字，得到的却是令人沮丧的的结果。这篇文章介绍相关的内容。

不是真正的文字

这可能是最常见的问题，很多人尝试对一张带有文字的图片进行像文字那样的选择，复制当然不行了。

重叠层遮挡

你应该也见过文章底部有那种淡出的效果，通常的做法是将一张渐变的图片置于文字的上方，所以你可以看到图片下方的内容，但是你选不了那些文字。

https://dn-w3ctrain.qbox.me/overlaptext.gif

在这个Demo中，我们使用伪元素和渐变图片来实现这种效果。庆幸的是，在大多数情况下，我们可以设置pointer-events:none属性来让上面的渐变图片不接受鼠标交互事件，于是点击事件就能去到文字内容部分了。

注：然而IE10不支持这个属性

弹出小工具

一些网站在你选完文字以后，做了一些有趣的行为。比如弹出一些惊叹号，一下小工具之类的。当然并不是所有人都喜欢。

https://dn-w3ctrain.qbox.me/popup-medium.png

Highlighter.js这个插件可以帮你很容易实现。

你也可以看看stackoverflow上的做法。

CSS控制可否选择

有一个CSS属性可以控制文字可否被选中 user-select。

.unselectable {

-webkit-user-select: none; /* Chrome all / Safari all */

-moz-user-select: none; /* Firefox all */

-ms-user-select: none; /* IE 10+ */

user-select: none; /* Likely future */

}

在移动设备上，可能大部分时候是通过长按来选择文字内容，你可以通过callout来阻止。

1 2	-webkit-touch-callout: default /* displays the callout / -webkit-touch-callout: none / disables the callout */

其他看得见，但是你选不了的方式

下面形式生成的文字，你也选不了：

默认的计数器比如有序列表
自定义计数器
伪元素文字

比如：

div::after {

content: "hi";

}

<div>

</div>

上面代码会出现两个”hi”但是你只能选中一个。

无法复制代码行数

我们在一些技术博客经常看到一些牛逼的代码，复制下来后发现，前面的行数并没有复制下来。（这是正确的做法），可能原因就是上面的某一种。

自动选中全部

表单元素经常使用这个，如果你想让文字可以像人们熟悉的可选择方式(ctl + A之类的)，那么就使用input 或者 textarea来承载。

1	<textarea id="ta">a bunch of text</textarea>

var ta = document.getElementById("ta");

ta.focus();

ta.select();

如果你想操作是当选中文本的一部分的时候，整个元素都被你选中，那么你可以用下面的代码：

$('#ta').on("focus", function(e) {

e.target.select();

$(e.target).one('mouseup', function(e) {

e.preventDefault();

});

监听mouseup并preventDefault是为了阻止鼠标事件改变了选择内容。

js将内容复制到剪切板

你可以使用javascriptdocument.execCommand('copy');，复制选中代码

1 2	<p>Email me at <a class="js-emaillink" href="mailto:matt@example.co.uk">matt@example.co.uk</a></p> <p><button class="js-emailcopybtn">Copy</button></p>

var copyEmailBtn = document.querySelector('.js-emailcopybtn');

copyEmailBtn.addEventListener('click', function(event) {

// Select the email link anchor text

var emailLink = document.querySelector('.js-emaillink');

var range = document.createRange();

range.selectNode(emailLink);

window.getSelection().addRange(range);

try {

// Now that we've selected the anchor text, execute the copy command

var successful = document.execCommand('copy');

var msg = successful ? 'successful' : 'unsuccessful';

console.log('Copy email command was ' + msg);

} catch(err) {

console.log('Oops, unable to copy');

}

// Remove the selections - NOTE: Should use

// removeRange(range) when it is supported

window.getSelection().removeAllRanges();

});

不过现在这部分代码兼容性不强。我们通常见到的是使用ZeroClipboard这个库来实现的。看看相关教程

如何去掉样式的复制

当你复制文字的时候，经常会连着样式一起复制下来。

https://dn-w3ctrain.qbox.me/copy-style.gif

mac系统有一种Past and Match Style的方式，它能非常有效的去掉你复制内容的样式。你可以设置快捷键Command-Shift-V。

https://dn-w3ctrain.qbox.me/copy-style-no.gif

https://dn-w3ctrain.qbox.me/20130817_tip_pastematchstyle_shortcut-screenshot.png

使用a标签会让内容难以复制

在HTML5中，我们可以使用a标签包裹任何我们想包裹的内容。

<h3>

Title

</h3>

</a>

这会让a标签里面的内容难以被复制。如果换成

h3 > a {

display:block;

}

那么复制会变得稍微简单一下，然而如果你习惯从右到左选中的话，同样会让你抓狂的。

See the Pen Block titles kinda hard to copy by Chris Coyier (@chriscoyier) on CodePen.