JS复制功能需要点击两次才能生效

Question

我正在调试别人的代码，"copy" 函数在第一次单击时起作用，但对于任何后续尝试，都需要单击两次才能复制。我不知道是什么原因造成的。

通过勾选用户想要复制的框然后单击 "copy" 来选择每个节点。然后可以将复制的数据粘贴到 Excel 或类似的地方。

HTML:

<li id="copy">
   <a title="Copy Contents Of Records" data-source="dbTable" href="#" ng-click="copyRow($event)" ng-class="{'disabled' : ShowLoading}"><i class="fa fa-paste"></i></a>
</li>

JAVASCRIPT:

$scope.copyRow = function ($event) {
    $event.preventDefault();

    let head = [];
    angular.forEach($scope.data.objColumns,
        function (col) {
            head.push(col.strColumnName);
        });

    let rows = [];
    angular.forEach($scope.data.objColumnData,
        function (item) {
            if (item.bolSelected) {
                let row = [];
                angular.forEach(item.columnData,
                    function (data) {
                        row.push(data.strColumnDisplayValue);
                    });
                rows.push(row);
            }
        });

    let virtualTable = document.createElement('table');
    virtualTable.id = "virTab";

    // For table head
    for (let i = 0; i < head.length; i++) {
        let th = document.createElement('th');
        th.innerHTML = head[i];
        virtualTable.appendChild(th);
    }

    // For table body
    for (let i = 0; i < rows.length; i++) {
        console.log(rows[i]);
        let tr = document.createElement('tr');
        for (let j = 0; j < rows[i].length; j++) {
            let td = document.createElement('td');
            td.innerHTML = rows[i][j];
            td.removeAttribute('style');
            tr.appendChild(td);
        }
        tr.removeAttribute('style');
        virtualTable.appendChild(tr);
    }
    virtualTable.removeAttribute('style');
    document.body.appendChild(virtualTable);

    // Invoke copying function
    let textRange;
    if (isIE()) {
        textRange = document.body.createTextRange();
        textRange.moveToElementText(document.getElementById('virTab'));
        textRange.execCommand("copy");
    } else {
        textRange = document.createRange();
        textRange.selectNode(document.getElementById('virTab'));
        window.getSelection().addRange(textRange);
        const success = document.execCommand('copy');
        let msg = success ? 'Success' : 'Failure';
        console.log(msg);
        window.getSelection().removeAllRanges();
    }

Answer 1

问题是需要在以下之前清除选择：

textRange.selectNode(document.getElementById('virTab'));

解决方案是添加

window.getSelection().removeAllRanges();

到 'else' 语句的开头。

JS复制功能需要点击两次才能生效

JS copy function needs to be clicked twice to work

javascript

clipboard

copy

copy-paste