单击复制或突出​​显示<code>to clipboard</code>

Question

当用户单击任何<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>

资源

单击时选择HTML文本输入中的所有文本

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')
})

它可以满足您的需求。 应归功于以下答案： 如何使用JavaScript复制到剪贴板？ 和https://stackoverflow.com/a/2838358/6872682