How can I copy more than 1 table cell data and then paste the data to the destination correctly?

问题

As my previous post stated that I want to implement the copy and paste feature in my web page. I would like to use document.execcommand("copy") to implement the feature,so that user can use Ctrl-Z to roll back the copy action. However, the Google Chrome browser seem to be not support multiple range in a selection, therefore, I need to find another solution for this problem.

After I search some sample code from google, I can copy 1 table cell data to another. However, if the no. of table cell that to be copied more than 1, it just keep the last data source value in the last destination cell. All the other data value are not kept. Here is my code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Copy event to clipboard</title>
        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
        <script>
            $( document ).ready(function() {
                $("td").on("paste",function(event){
                    console.log("cell paste event");
                    var self = this;
                    setTimeout(function() {
                        self.blur();
                    }, 0);
                });
                $("body").keydown(function(event){
                    switch (event.which)
                    {
                        case 86://v
                                if (event.ctrlKey)  
                                {
                                    pasteDemo(event);
                                }
                    }           
                });
            });
            function pasteDemo(event)
            {
                console.log("Body Paste Event");
                var inputBox=document.createElement("input");
                var cell,cellNames=["c11","c12","c13"];
                var data=["QQ","SS","RR"];

                $("body").append(inputBox);

                for (var i=0;i<cellNames.length;i++)
                {
                    cell=document.getElementById(cellNames[i]);
                    inputBox.value=data[i];
                    inputBox.select();
                    console.log("Copy Result="+document.execCommand("copy"));
                    cell.focus();
                    console.log("Paste Result="+document.execCommand("paste"));
                }
                $(inputBox).remove();
            }
        </script>   
    </head>
    <body>
        <table border="1" id="destTable" width="500px">
            <tr>
                <td id="c11" contenteditable="true"></td>
                <td id="c12" contenteditable="true"></td>
                <td id="c13" contenteditable="true"></td>
            </tr>
            <tr>
                <td id="c21" contenteditable="true"></td>
                <td id="c22" contenteditable="true"></td>
                <td id="c23" contenteditable="true"></td>
            </tr>
            <tr>
                <td id="c31" contenteditable="true"></td>
                <td id="c32" contenteditable="true"></td>
                <td id="c33" contenteditable="true"></td>
            </tr>
        </table>
    </body>
</html>

After the above page is loaded, then Press Ctrl-V on the keyborad, only the value "RR" is kept in the third cell, other values are vanished, how can I keep the other values in the corresponding cell?

来源：https://stackoverflow.com/questions/54529346/how-can-i-copy-more-than-1-table-cell-data-and-then-paste-the-data-to-the-destin

标签

javascript

copy-paste