使用 javascript 单击两次后复制到剪贴板工作

Question

function click(){
var input = document.getElementById('div');
input.focus();
document.execCommand('selectAll');
document.execCommand('copy');
}

点击按钮时执行函数：

<button onClick="click();">copy</button>

此外，我只想复制 div 元素中的 table 一个单击，但单击两次会复制整个文档。

Answer 1

这对你有用:) JSFIDDLE Link

Html

<div id="divelm" contentEditable="true" style="width:200px;height:200px;border:1px solid #ccc"></div>

Javascript

function SelectText(element) {
    var doc = document;
    var text = doc.getElementById(element);    
    if (doc.body.createTextRange) { // ms
        var range = doc.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();
        var range = doc.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);

    }
}

var elm = document.getElementById('divelm');
elm.onclick = function(){

   SelectText('divelm');
   document.execCommand('copy');



}

Answer 2

首先，您不能依赖用户的浏览器支持剪贴板操作，因此您可能想提供一种替代方法来复制 table。

在您的代码中，click 作为全局函数的名称会覆盖本机 window.click 方法，因此不应使用。这可能是您必须单击按钮两次的原因（或者您的代码中有一些您尚未发布的内容）。

只能获取表单元素和editable元素，或具有tabindex属性的元素。在你的情况下 input.focus() 没有效果，因此整个文档是 selected.

这是一个点击处理程序，它可以执行您想要的操作，但不是很通用。它克隆从 #div 找到的第一个 table 并将其附加到隐藏和 editable div，在那里它可以被 selected 并使用 execCommands.

function copyTable () {
    var content = document.getElementById('div').getElementsByTagName('table')[0], // Get the element to copy
        copyPad = document.getElementById('copypad'),
        clone = content.cloneNode(true); // Clone the element to copy
    copyPad.appendChild(clone); // Add  the clone to an editable element
    copyPad.style.display = 'block'; // Some browsers refuse to select hidden content, hence show the div temporarily
    copyPad.focus(); // You can gain focus to an editable element
    try { // Not good, but tackles issues, if Security blocks the copy, or execCommand is not supported
        document.execCommand('selectAll'); // Now selects the content of the focused element only
        document.execCommand('copy');
    } catch (err) {
        // Security options of this browser blocks copy
        // or the API is not supported
        // Provide an alternative way to copy the table
    }
    copyPad.innerHTML = ''; // Clear the copyPad
    copyPad.style.display = ''; // Prevent the editable to be shown
    return;
}

然后我们需要一些 CSS 和 HTML:

#copypad {
    display: none;
}

<div id="div">
    <table>
       :
    </table>
</div>
<div id="copypad" contenteditable="true"></div>

A working demo at jsFiddle.

另请注意，剪贴板的内容可能因使用的浏览器而异。

另一种方法是提示用户 select 并复制 table，或者您可以阅读内容并将其显示在文本区域中以供复制。

使用 javascript 单击两次后复制到剪贴板工作

Copy to clipboard working after clicking twice using javascript

javascript

clipboard