onclick 复制或突出显示 <code> 到剪贴板答案

【问题标题】：onclick copy or highlight <code> to clipboardonclick 复制或突出显示 <code> 到剪贴板
【发布时间】：2017-04-10 07:58:23
【问题描述】：

当人们点击任何<code> 元素时，它会自动突出显示里面的所有内容并复制到剪贴板。我正在写文章，并且有很多用于 SSH 的复制/粘贴命令。如果我可以为访问者减少几十次点击，那就太好了。当我尝试以下代码时出现此错误：

$(function () {
    $(document).on('click', 'code', function () {
        this.select();
    });
});

我用markdown写这些文章，当我导出时，它只是干净的代码。如果我不必使用 Flash 或向 html 添加类或 id，我会更喜欢。相反，只需假设 <code> 中的所有内容都应在单击时复制到剪贴板。

我也试过了，但还是不行。

<script type="text/javascript">
$('code').focus(function () {
  this.select();
  this.setSelectionRange(0, 9999);
}).mouseup(function (e) {
  e.preventDefault();
});
</script>

来源

Selecting all text in HTML text input when clicked

http://jsfiddle.net/NNqyF/

【问题讨论】：

标签： javascript jquery onclick markdown clipboard

【解决方案1】：

做到这一点的唯一方法是创建一个哑文本区域并复制它的内容，然后删除该文本区域。

$(function () {
    $(document).on('click', 'code', function () {
      $(this).addClass("active")
       textarea =  $("<textarea>").val($(this).html()).height(0).appendTo(document.body).select();
        document.execCommand('copy');
       textarea.remove();
    });
});

code {
  background: #555;
  color:white;
}
.active {
  background:#3399ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<code>test2</code>

【讨论】：

几乎完美！您认为添加高亮效果的最佳方法是设置code:active { background: red;} 的样式吗？任何其他提示技巧或提示？
我更新了我的代码。它应该工作。单击后，它会突出显示它。

【解决方案2】：

我只在 chrome 中对此进行了测试，但您可以执行以下操作：

$('code').on('click', function(e){
  var sel = window.getSelection()
  var r = document.createRange()
  r.selectNodeContents(e.target.closest('code'))
  sel.removeAllRanges()
  sel.addRange(r)
  document.execCommand('copy')
})

它做你想做的事。信用应该归功于这些答案：How do I copy to the clipboard in JavaScript? 和 https://stackoverflow.com/a/2838358/6872682

【讨论】：