你可能曾经尝试过复制网页上的一些文字，得到的却是令人沮丧的的结果。这篇文章介绍相关的内容。
不是真正的文字
这可能是最常见的问题，很多人尝试对一张带有文字的图片进行像文字那样的选择，复制当然不行了。
重叠层遮挡
你应该也见过文章底部有那种淡出的效果，通常的做法是将一张渐变的图片置于文字的上方，所以你可以看到图片下方的内容，但是你选不了那些文字。
在这个Demo中，我们使用伪元素和渐变图片来实现这种效果。庆幸的是，在大多数情况下，我们可以设置pointer-events:none属性来让上面的渐变图片不接受鼠标交互事件，于是点击事件就能去到文字内容部分了。
注：然而IE10不支持这个属性
弹出小工具
一些网站在你选完文字以后，做了一些有趣的行为。比如弹出一些惊叹号，一下小工具之类的。当然并不是所有人都喜欢。
Highlighter.js这个插件可以帮你很容易实现。
你也可以看看stackoverflow上的做法。
CSS控制可否选择
有一个CSS属性可以控制文字可否被选中 user-select。
|
1
2
3
4
5
6
|
.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 */
|
其他看得见，但是你选不了的方式
下面形式生成的文字，你也选不了：
比如：
|
1
2
3
|
div::after {
content: "hi";
}
|
|
1
2
3
4
|
<div>
<!-- Rest of stuff inside the div -->
hi
</div>
|
上面代码会出现两个”hi”但是你只能选中一个。
无法复制代码行数
我们在一些技术博客经常看到一些牛逼的代码，复制下来后发现，前面的行数并没有复制下来。（这是正确的做法），可能原因就是上面的某一种。
自动选中全部
表单元素经常使用这个，如果你想让文字可以像人们熟悉的可选择方式(ctl + A之类的)，那么就使用input 或者 textarea来承载。
|
1
|
<textarea id="ta">a bunch of text</textarea>
|
|
1
2
3
|
var ta = document.getElementById("ta");
ta.focus();
ta.select();
|
如果你想操作是当选中文本的一部分的时候，整个元素都被你选中，那么你可以用下面的代码：
|
1
2
3
4
5
6
|
$('#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>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
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这个库来实现的。看看相关教程
如何去掉样式的复制
当你复制文字的时候，经常会连着样式一起复制下来。
mac系统有一种Past and Match Style的方式，它能非常有效的去掉你复制内容的样式。你可以设置快捷键Command-Shift-V。
使用a标签会让内容难以复制
在HTML5中，我们可以使用a标签包裹任何我们想包裹的内容。
|
1
2
3
4
5
|
<a href="#0">
<h3>
Title
</h3>
</a>
|
这会让a标签里面的内容难以被复制。如果换成
|
1
2
3
|
h3 > a {
display:block;
}
|
那么复制会变得稍微简单一下，然而如果你习惯从右到左选中的话，同样会让你抓狂的。
See the Pen Block titles kinda hard to copy by Chris Coyier (@chriscoyier) on CodePen.