Question

({...;...;})

单击按钮时执行该功能：

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

另外，我想只复制div元素中的表单击，但这会在单击两次时复制整个文档。

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

首先，您不能依赖用户的浏览器支持剪贴板操作，因此您可能希望提供另一种复制表的方法。

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

只有形成元素和可编辑元素或具有tabindex属性的元素才能获得焦点。在您的情况下，input.focus()无效，因此选择了整个文档。

这是一个单击处理程序，可以执行您想要的操作，但它不是非常通用的。它克隆了从#div找到的第一个表，并将其附加到隐藏且可编辑的div，可以使用execCommand选择并复制它。

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

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

另一种方法是提示用户选择和复制表格，或者您可以阅读内容并将其显示在文本区域中进行复制。

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

2 个答案: