如何使用<code> <pre> Jquery和JS从和标签复制到剪贴板文本？

Question

根据MDN Web文档

HTMLInputElement.select((方法选择元素或包含文本字段的元素中的所有文本。

这意味着.select()不适用于除input和textarea之外的元素。在我的情况下，我在code和pre中有一些字符串，我希望用户点击复制按钮来复制里面的文本，但根据上面的定义，这是不起作用的。

$(document).ready(function() {
$('code, pre').append('<span class="command-copy" ><i class="fa fa-clipboard" aria-hidden="true"></i></span>');
$('code span.command-copy').click(function(e) {
text = $(this).parent().select(); //.text();
copiedText = $.trim(text);
document.execCommand("copy");
});

$('pre span.command-copy').click(function(e) {
text = $(this).parent().parent().select(); //.text();
copiedText = $.trim(text);
document.execCommand("copy");
});
})

code,
pre {
position: relative;
}
code,
pre {
display: block;
padding: 20px;
background: #f2f2f2;
color: #555755;
}
span.command-copy {
position: absolute;
top: 10px;
right: 10px;
opacity: .6;
font-size: 20px;
color: #555755;
}
span.command-copy:hover {
cursor: pointer;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<h4>
<b>Steps to install pytest</b>
</h4>
<p>
<b>Step 1: </b>Open the terminal and type in this command:
</p>
<code class="command-copy">
pip install pytest 
</code>
<p>Or you can upgrade your existing:
<p>
<pre><span></span><span class="nv">pip</span> install --upgrade pytest
<span class="command-copy"><i class="fa fa-clipboard" aria-hidden="true"></i></span></pre>

我有办法解决这个问题吗？感谢

Answer 1

以下是如何通过在现有代码中添加一些java脚本，将文本点击事件复制到剪贴板。

.select((在您的情况下不起作用，因为它只选择文本，但不复制文本，在您的例子中，您也需要单击以复制和粘贴。

添加的内容很少：

1. 您需要在body中创建元素，并将文本值复制到其中
2. document.execCommand('copy');将输入的值
3. 一旦复制成功，它将从DOM中删除输入值

运行下面的代码段以查看它的工作情况。

$(document).ready(function() {
$('code, pre').append('<span class="command-copy" ><i class="fa fa-clipboard" aria-hidden="true"></i></span>');
$('code span.command-copy').click(function(e) {
var text = $(this).parent().text().trim(); //.text();
var copyHex = document.createElement('input');
copyHex.value = text
document.body.appendChild(copyHex);
copyHex.select();
document.execCommand('copy');
console.log(copyHex.value)
document.body.removeChild(copyHex);
});

$('pre span.command-copy').click(function(e) {
var text = $(this).parent().text().trim();
var copyHex = document.createElement('input');
copyHex.value = text
document.body.appendChild(copyHex);
copyHex.select();
document.execCommand('copy');
console.log(copyHex.value)
document.body.removeChild(copyHex);
});
})

code,
pre {
position: relative;
}
code,
pre {
display: block;
padding: 20px;
background: #f2f2f2;
color: #555755;
}
span.command-copy {
position: absolute;
top: 10px;
right: 10px;
opacity: .6;
font-size: 20px;
color: #555755;
}
span.command-copy:hover {
cursor: pointer;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<h4>
<b>Steps to install pytest</b>
</h4>
<p>
<b>Step 1: </b>Open the terminal and type in this command:
</p>
<code class="command-copy">
pip install pytest 
</code>
<p>Or you can upgrade your existing:
<p>
<pre><span></span><span class="nv">pip</span> install --upgrade pytest
<span class="command-copy"><i class="fa fa-clipboard" aria-hidden="true"></i></span></pre>