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

Question

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

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

我用 markdown 写这些文章，当我导出时，它只是干净的代码。如果我不必使用 Flash 或向 html 添加 class 或 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/

Answer 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>

Answer 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? and

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

onclick copy or highlight <code> to clipboard

javascript

clipboard

markdown

jquery

onclick

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