复制粘贴与网页

.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 */       
}

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

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

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

或其他任何内容。此外，如果用户位于表单元素内，“选择全部”命令通常只会选择该元素范围内的文本，这是不错的预期行为。

如果您希望在点击文本时将其选中的行为，以下是一种非常简洁的 jQuery 方法

$('#ta').on("focus", function(e) {
  e.target.select();
  $(e.target).one('mouseup', function(e) {
    e.preventDefault();
  });
});

mouseup 中的这部分允许文本在 mouseup 事件后保持选中状态。通常，mouseup 会取消选择文本并激活光标。

我喜欢 这种方法，因为它也不会强制选择所有文本无论如何（人们 不喜欢），而只在初始焦点时选择。因此，在焦点之后，如果您想自己更改选择并仅复制文本的一部分，则可以这样做。

如果您不提供点击选择，这有时也会 让用户不满意，因此这是一个平衡。因此，我喜欢上面这种先聚焦到选择，然后让其保持原状的方法。

关于使用 JavaScript 选择文本，还有更多需要了解的内容，包括 范围选择 等，这 非常复杂，最好留到另一篇文章中介绍。

以编程方式复制到剪贴板

此功能 最近出现在 JavaScript 中。在撰写本文时，只有 Chrome 和 IE 支持。它是通过 document.execCommand('copy'); 实现的。

这里有一段我还没有完全了解的历史。我认为这在很大程度上是一个安全问题，这就是为什么它在 JavaScript 中是不可能的。更不用说一个品味问题了（谁想访问一个网站却发现他们的剪贴板被弄乱了？）。无论出于何种原因，它现在都可以使用了。

Matt Gaunt 提供了一些示例代码

请发送邮件至 [email protected]

复制

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();  
});

以编程方式将文本复制到剪贴板一直以来都是一个愿望。我们过去不得不使用 Flash，通常是一个名为 ZeroClipboard 的库。这是 David Walsh 关于此主题的教程。

如何复制粘贴并控制样式/格式

当你复制文本时，通常会连带复制其格式。

在 Mac 上，有一个**粘贴并匹配样式**命令，在你不想要原始格式的时候非常有用。比如粘贴到电子邮件中。Command-Shift-V 是这个命令的快捷键。

我通常更喜欢这种行为，所以我做了点事情，将它映射到 Command-V（覆盖正常的粘贴）。

如果你需要，你仍然可以通过菜单粘贴带有格式的文本。

剪贴板上的额外内容

你有没有从某个网站上选择了一些文本，却发现粘贴后，你的选择后面出现了一些额外的垃圾？阅读更多内容在 FART-KNUCKLE.BUSINESS!!!

不要那样做。

尴尬的保留大写

你可以使用 CSS 中的 text-transform: uppercase; 属性将文本大写。但是，它会导致不同浏览器在复制粘贴时出现相当大的（烦人）功能差异。

根据我快速测试的结果

• Firefox 和 IE **尊重原始文本**（DOM 中的内容）。
• Chrome、Safari、Opera 和 iOS **尊重 CSS** 的大写设置。

我更喜欢前者。

块级链接可能使复制更困难

在 HTML5 中，我们了解到现在可以将锚标签包裹在任何我们想要的内容周围。即使它们是内联元素，我们也可以将它们包裹在块级元素周围，而不用担心无效。但这并非没有后果的。

标题

这使得整个块级标题成为一个链接，无需任何 CSS 辅助，但它确实使标题有点难以复制。通过包裹该标记并使用 h3 > a { display: block; } 可以使其更容易一些，假设 h3 上有一些填充，因为这样你就可以从填充开始选择并移动。

所以一方面点击区域更大，另一方面复制稍微困难一些（如果你习惯从右到左复制）。由你决定。

查看 CodePen 上 Chris Coyier (@chriscoyier) 的作品 块级标题有点难复制。

有时块级结构本身会导致令人恼火的情况。就像这里，你试图选择一个电影标题，但鼠标偏离了一像素，你就得到了一堆在完全无关位置的奇怪文本。

这里的问题不算很大，因为我认为人们对此已经比较习惯了，知道如何退回并获取他们需要的内容。但值得考虑。即使像 Flexbox 排序这样的东西也会完全改变文本选择的行为，即使在视觉上看起来完全相同。

查看 CodePen 上 Chris Coyier (@chriscoyier) 的作品 flex 排序和选择。

粘贴到控制台

经典的错误：在关于如何在终端执行操作的博文中，复制控制台命令开头的“$”。举手的人。只有我吗？该死。无论如何。有一个相当有趣的dotfile 东西可以在你这样做的时候警告你。

还有其他问题吗？

你对网络上的复制粘贴或选择是否有任何个人不满？