如何在不使用按钮的情况下将嵌套文本复制到剪贴板

Question

我的HTML页面上有一个SQL查询：

<p class="sqlcolor" style="color:black;font-family:Verdana;">
<span class="sqlnumbercolor" style="color:"></span> 
<span class="sqlkeywordcolor" style="color:mediumblue">SELECT</span> f.name, f.plz, f.ort, f.strasse<br>
<span class="sqlkeywordcolor" style="color:mediumblue">FROM</span> FIRMA f, FIRMA_GEWERKE fg, GEWERKE g<br>
<span class="sqlnumbercolor" style="color:"></span> 
<span class="sqlkeywordcolor" style="color:mediumblue">WHERE</span> fg.FG_GEWERKE_ID = g.GEWERKE_ID  <br>
<span class="sqlkeywordcolor" style="color:mediumblue">AND</span> f.firma_ID = fg.FG_FIRMA_ID <br>
<span class="sqlkeywordcolor" style="color:mediumblue">AND</span> g.gewerke_ID = 
<span class="sqlstringcolor" style="color:brown">6</span> <br>
<span class="sqlkeywordcolor" style="color:mediumblue">AND</span> fg.active =
<span class="sqlstringcolor" style="color:brown">0</span> <br>
<span class="sqlkeywordcolor" style="color:mediumblue">ORDER BY</span> f.name;
</p>

现在我想做的是在用户单击时将 SQL 查询复制到剪贴板。 我试图通过使用这个Javascript代码来实现这一点：

const sql = document.querySelector("p.sqlcolor");
sql.onclick = function() {
document.execCommand("copy");
}
sql.addEventListener("copy", function(event) {
event.preventDefault();
if (event.clipboardData) {
event.clipboardData.setData("text/plain", sql.textContent);
console.log(event.clipboardData.getData("text"))
}
});

但是文本显然没有复制到剪贴板。我有点期待这一点，因为我对Javascript相当陌生。实现我想用纯Javascript做的事情的最佳方法是什么(请不要jquery(？您能否更正我的代码和/或添加一些新代码以使其工作？

注意：如果我只有一个没有子元素的父元素，我知道如何复制文本(例如<p> some text </p>(。但是我想复制这个p类中的所有(嵌套(文本！对我来说，问题是p类包含span元素，我认为这就是我的javascript代码不将任何内容复制到剪贴板的问题。我可能需要进一步深入，但不知道如何。

编辑：

我想在我的HTML页面中添加更多的SQL查询。 如果我在第一个查询中添加另一个 sql 查询......

<p class="sqlcolor" style="color:black;font-family:Verdana;">
<span class="sqlnumbercolor" style="color:"></span> 
<span class="sqlkeywordcolor" style="color:mediumblue">SELECT</span> f.name, g.bezeichnung<br>
<span class="sqlkeywordcolor" style="color:mediumblue">FROM</span> firma f, gewerke g, firma_gewerke fg  <br>
<span class="sqlnumbercolor" style="color:"></span> 
<span class="sqlkeywordcolor" style="color:mediumblue">WHERE</span> f.firma_id = fg.fg_firma_id <br>
<span class="sqlkeywordcolor" style="color:mediumblue">AND</span> g.gewerke_id = fg.fg_gewerke_id <br>
<span class="sqlkeywordcolor" style="color:mediumblue">AND</span> f.firma_id =
<span class="sqlstringcolor" style="color:brown">493</span>; <br>

。我希望将取决于我单击的段落的文本复制到剪贴板。

Answer 1

您可以将clickEventListener添加到sql元素，并在提供的回调中执行copy命令。请参阅下面的代码片段。

const sql = document.querySelector("p.sqlcolor");
sql.addEventListener('click', () => {
document.execCommand("copy");
});
sql.addEventListener("copy", function(event) {
event.preventDefault();
if (event.clipboardData) {
/* It seems to me that using "innerText" has better output than
* "textContent", feel free to change it back, if needed.
*/
event.clipboardData.setData("text/plain", sql.innerText);
console.log(event.clipboardData.getData("text"))
}
});

<p class="sqlcolor" style="color:black;font-family:Verdana;">
<span class="sqlnumbercolor" style="color:"></span>
<span class="sqlkeywordcolor" style="color:mediumblue">SELECT</span> f.name, f.plz, f.ort, f.strasse<br>
<span class="sqlkeywordcolor" style="color:mediumblue">FROM</span> FIRMA f, FIRMA_GEWERKE fg, GEWERKE g<br>
<span class="sqlnumbercolor" style="color:"></span>
<span class="sqlkeywordcolor" style="color:mediumblue">WHERE</span> fg.FG_GEWERKE_ID = g.GEWERKE_ID <br>
<span class="sqlkeywordcolor" style="color:mediumblue">AND</span> f.firma_ID = fg.FG_FIRMA_ID <br>
<span class="sqlkeywordcolor" style="color:mediumblue">AND</span> g.gewerke_ID =
<span class="sqlstringcolor" style="color:brown">6</span> <br>
<span class="sqlkeywordcolor" style="color:mediumblue">AND</span> fg.active =
<span class="sqlstringcolor" style="color:brown">0</span> <br>
<span class="sqlkeywordcolor" style="color:mediumblue">ORDER BY</span> f.name;
</p>

更新多个元素：

为了能够将此方法应用于多个元素，您可以编写一个循环，该循环将使用类向所有 DOM 元素添加EventListener.sqlcolor(请参阅下面的代码片段(。

// Using querySelectorAll will return a NodeList
const sqlElements = document.querySelectorAll("p.sqlcolor");
/*
* Using [...sqlElements] as a substitute for "Array.from(sqlElements)"
* to be able to iterate over the DOM elements
*/
[...sqlElements].forEach(element => {
// The code below is similar to the one for single element
element.addEventListener('click', () => {
document.execCommand("copy");
});
element.addEventListener("copy", function(event) {
event.preventDefault();
if (event.clipboardData) {
/* It seems to me that using "innerText" has better output than
* "textContent", feel free to change it back, if needed.
*/
event.clipboardData.setData("text/plain", element.innerText);
console.log(event.clipboardData.getData("text"))
}
});
});

<p class="sqlcolor" style="color:black;font-family:Verdana;">
<span class="sqlnumbercolor" style="color:"></span>
<span class="sqlkeywordcolor" style="color:mediumblue">SELECT</span> f.name, f.plz, f.ort, f.strasse<br>
<span class="sqlkeywordcolor" style="color:mediumblue">FROM</span> FIRMA f, FIRMA_GEWERKE fg, GEWERKE g<br>
<span class="sqlnumbercolor" style="color:"></span>
<span class="sqlkeywordcolor" style="color:mediumblue">WHERE</span> fg.FG_GEWERKE_ID = g.GEWERKE_ID <br>
<span class="sqlkeywordcolor" style="color:mediumblue">AND</span> f.firma_ID = fg.FG_FIRMA_ID <br>
<span class="sqlkeywordcolor" style="color:mediumblue">AND</span> g.gewerke_ID =
<span class="sqlstringcolor" style="color:brown">6</span> <br>
<span class="sqlkeywordcolor" style="color:mediumblue">AND</span> fg.active =
<span class="sqlstringcolor" style="color:brown">0</span> <br>
<span class="sqlkeywordcolor" style="color:mediumblue">ORDER BY</span> f.name;
</p>
<p class="sqlcolor" style="color:black;font-family:Verdana;">
<span class="sqlnumbercolor" style="color:"></span>
<span class="sqlkeywordcolor" style="color:mediumblue">SELECT</span> f.name, g.bezeichnung<br>
<span class="sqlkeywordcolor" style="color:mediumblue">FROM</span> firma f, gewerke g, firma_gewerke fg <br>
<span class="sqlnumbercolor" style="color:"></span>
<span class="sqlkeywordcolor" style="color:mediumblue">WHERE</span> f.firma_id = fg.fg_firma_id <br>
<span class="sqlkeywordcolor" style="color:mediumblue">AND</span> g.gewerke_id = fg.fg_gewerke_id <br>
<span class="sqlkeywordcolor" style="color:mediumblue">AND</span> f.firma_id =
<span class="sqlstringcolor" style="color:brown">493</span>; <br>