如何将 ajax 成功结果复制到剪贴板

Question

我有一个 ajax 方法，它从控制器获取数据并显示在 Jquery 对话框中。我的目标是在对话框中有一个按钮，允许单击数据而不是用户使用鼠标突出显示数据并进行复制。

Ajax

    function GrabLink(surveyName) {
    $.ajax({
        type: "GET",
        url: "/Survey/sendLink",
        data: { test: surveyName },
        contentType: "application/json; charset=utf-8",
        success: function (data) {

            $('#my-dialog').html(data);
            $("#my-dialog").dialog("open");

            //alert(data);
            //$("#my-dialog").show(data);
        }
    })
}

Jquery 对话框

    $('#my-dialog').dialog({
    autoOpen: false,
    width: 400,
    resizable: false,
    modal: true,
    buttons: {
        'Copy': function ()
        {
            //window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
           // $(this).dialog('close');

        }

    }
});

Answer 1

您可以使用 execCommand 通过 javascript 在剪贴板上复制。暂时创建一个输入，将数据放入其中并删除它：

function clipboard(){
    var mydata = document.createElement("input");
    document.body.appendChild(mydata);
    mydata.setAttribute("id", "mydata_id");
    document.getElementById("mydata_id").value=Yourdata-success-response;  
    mydata.select();
    document.execCommand("copy");
    document.body.removeChild(mydata);
}

Answer 2

尝试下面的代码复制数据而不选择 text/data

<head>
    <script type="text/javascript">
        function CopyToClipboard () {
            var input = document.getElementById ("toClipboard");
            var textToClipboard = input.value;
            
            var success = true;
            if (window.clipboardData) { // Internet Explorer
                window.clipboardData.setData ("Text", textToClipboard);
            }
            else {
                    // create a temporary element for the execCommand method
                var forExecElement = CreateElementForExecCommand (textToClipboard);

                        /* Select the contents of the element 
                            (the execCommand for 'copy' method works on the selection) */
                SelectContent (forExecElement);

                var supported = true;

                    // UniversalXPConnect privilege is required for clipboard access in Firefox
                try {
                    if (window.netscape && netscape.security) {
                        netscape.security.PrivilegeManager.enablePrivilege ("UniversalXPConnect");
                    }

                        // Copy the selected content to the clipboard
                        // Works in Firefox and in Safari before version 5
                    success = document.execCommand ("copy", false, null);
                }
                catch (e) {
                    success = false;
                }
                
                    // remove the temporary element
                document.body.removeChild (forExecElement);
            }

            if (success) {
                alert ("The text is on the clipboard, try to paste it!");
            }
            else {
                alert ("Your browser doesn't allow clipboard access!");
            }
        }

        function CreateElementForExecCommand (textToClipboard) {
            var forExecElement = document.createElement ("div");
                // place outside the visible area
            forExecElement.style.position = "absolute";
            forExecElement.style.left = "-10000px";
            forExecElement.style.top = "-10000px";
                // write the necessary text into the element and append to the document
            forExecElement.textContent = textToClipboard;
            document.body.appendChild (forExecElement);
                // the contentEditable mode is necessary for the  execCommand method in Firefox
            forExecElement.contentEditable = true;

            return forExecElement;
        }

        function SelectContent (element) {
                // first create a range
            var rangeToSelect = document.createRange ();
            rangeToSelect.selectNodeContents (element);

                // select the contents
            var selection = window.getSelection ();
            selection.removeAllRanges ();
            selection.addRange (rangeToSelect);
        }
    </script>
</head>
<body>
    <input id="toClipboard" value="text to clipboard"/>
    <button onclick='CopyToClipboard ()'>Copy text to clipboard</button>
</body

如何将 ajax 成功结果复制到剪贴板

How to copy ajax success result to clipbaord

javascript

ajax

clipboard

jquery