在 h3 标签内复制文本时，复制到剪贴板不是功能

Question

我正在尝试将 h3 标签内的文本复制到剪贴板。我在 copyText.select() 代码行收到以下错误。

未捕获类型错误：copyText.select 不是函数在 HTMLDivElement.

编辑：在输入标签上使用时，复制到剪贴板功能有效，但在 h3 标签内时无效。

HTML

<div class="colorDiv" id="firstColorObject">
    <h3 class="colorCode" id="p1" value="123">#Color 1</h3>
</div>

JavaScript

document.querySelector("#firstColorObject").addEventListener("click", function(){
    var copyText = document.getElementById("p1");

    copyText.select();
    document.execCommand("copy");
    alert("Copied the text: " + copyText.value);

}, false);

Answer 1

Clipboard js 会对你的情况有所帮助

Answer 2

您可以使用 <input> 元素调用 select，但不能使用 <h3> 元素。

然而，当您在调用 select 之前将 #p1 的内容分配给隐藏字段时，您可以利用 <input>。

请注意： 使用隐藏字段调用 select 仅当您将实际可见字段包裹在隐藏的 <div> 元素周围时才有效（仅使用 opacity:0 进行测试）。无法从像这样的真正隐藏的输入中复制值（通过 select 和 document.execCommand("copy")）：

<input type="hidden" id="copyText"/>

希望下面的示例对您有所帮助（要执行它，请单击 "Run Code snippet"-按钮）：

document.querySelector("#firstColorObject").addEventListener("click", function(){

    var p1 = document.getElementById("p1");
    
    // set "#Color 1" with the hidden field so that you can call select on it
    var hiddenField = document.getElementById("copyText");
    hiddenField.value = p1.innerHTML;
    hiddenField.select();
    document.execCommand("copy");
    
    alert("Copied the text: " + hiddenField.value);

}, false);

<div class="colorDiv" id="firstColorObject">
    <h3 class="colorCode" id="p1" value="123">#Color 1</h3>
    <div style="opacity:0">
        <input type="text" id="copyText"/>
    </div>
</div>

Answer 3

input.select() 函数不适用于 h3 。操纵选择通常完成 window.getSelection().addRange() .

尝试

<html>
<body>
<h3>Hello world</h3>
<script type="text/javascript">
var h3 = document.querySelector('h3');
var r = document.createRange();
r.selectNode(h3);
window.getSelection().addRange(r);
document.execCommand("copy");
</script>
</body>
</html>

在 h3 标签内复制文本时，复制到剪贴板不是功能

Copy to clipboard is not a function when copying text inside h3 tag

javascript

clipboard

copy

HTML

JavaScript