How to copy to client clipboard on asp.net button click

Question

Im currently using ASP.NET 4.7 webforms for a project, I'm trying to copy the data that is generated in the backend to users client machine.

In other words, when the user submits the form, the code that is generated in the backend needs to be copied to the users clipboard.

Here is my attempt.

Application.aspx.cs

.
.
.
   protected void Submit(object sender, EventArgs e)
    {
        try
        {
            ClientScript.RegisterStartupScript(GetType(), "hwa", "copyToClipboard("+encodedValue+");", true);
        }
        catch (Exception ex)
        {
        
        }
    }

Application.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Application.aspx.cs" Inherits="azureCopyToClipboard.Application" %>

<!DOCTYPE html>
<form id="form1" runat="server">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>

        <div>
             <asp:Button ID="SubmitButton" runat="server" class="btn btn-primary  " OnClick="Submit" Text="Submit" />
        </div>
 
</body>

</html>


<script type="text/javascript">

    function copyToClipboard(textToCopy) {
        var textArea;

        function isOS() {
            //can use a better detection logic here
            return navigator.userAgent.match(/ipad|iphone/i);
        }

        function createTextArea(text) {
            textArea = document.createElement('textArea');
            textArea.readOnly = true;
            textArea.contentEditable = true;
            textArea.value = text;
            document.body.appendChild(textArea);
        }

        function selectText() {
            var range, selection;

            if (isOS()) {
                range = document.createRange();
                range.selectNodeContents(textArea);
                selection = window.getSelection();
                selection.removeAllRanges();
                selection.addRange(range);
                textArea.setSelectionRange(0, 999999);
            } else {
                textArea.select();
            }
        }

        function copyTo() {
            document.execCommand('copy');
            document.body.removeChild(textArea);
        }

        createTextArea(textToCopy);
        selectText();
        copyTo();
    }

</script>

</form>

im calling the client function using ClientScript.RegisterStartupScript to paste the encoded value to the users clipboard...however this attempt is not working due to modern browser security reasons, I'm also not getting any client side errors to attach to this question.

Im trying to make this solution support both mobile & non-mobile.

*"is not working"* is a virtually meaningless problem statement without any debugging details, errors etc — charlietfl, Jun 27 '20 at 16:00
@charlietfl sorry, I believe the reason is due to some security policy within modern browsers that prevents this way of doing... as mentioned in this question on Stackoverflow https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript — Jilo, Jun 27 '20 at 16:03
Ok that's a really old question based on older browsers ... have a look at https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard — charlietfl, Jun 27 '20 at 16:16
@charlietfl thanks, i checked the URL you have posted, i tried two functions, execCommand() & Clipboard API..both are working fine with my code above on my desktop chrome...however not copying to clipboard on iPad — Jilo, Jun 27 '20 at 17:17
Is it also chrome? May still run into security issues on a per browser/os basis. I have not used clipboard api for many years — charlietfl, Jun 27 '20 at 17:23
the browser that i am using on ipad is safari which did not copy to clipboard for my case. — Jilo, Jun 27 '20 at 17:27
Probably a safari security issue. Try a search for "javscript safari clipboard" or similar. If you have chrome on the ipad try that also — charlietfl, Jun 27 '20 at 17:29
@charlietfl well, i've tried almost every solution in https://stackoverflow.com/questions/34045777/copy-to-clipboard-using-javascript-in-ios yet, not clipping to clipboard i've uploaded my solution to azure https://azurecopytoclipboard20200627163210.azurewebsites.net/application.aspx and updated my question with updated code. — Jilo, Jun 27 '20 at 17:47

score 1 · Accepted Answer · answered Jun 28 '20 at 04:45

Unfortunately most browsers would not let you write to clipboard without a proper user action, such as inside a button click event. Otherwise, it could be used for malicious purposes; any website could write whatever they want into your clipboard, just by visiting the web site. In your case, your button click loses its own event context since you make an async HTTP operation, and inside a success callback function from your server response, you do not have the permission to write to clipboard anymore.

What I would suggest, and what most web sites are doing is; showing the result code inside a nice big modal window, with a big nice "Copy To Clipboard" button.

that's very true, I've experience the clipboard functionality stops working when i add an http request to my method. I will be adding an extra step where users can click "copy to clipboard" and see how it goes. thank you! — Jilo, Jun 28 '20 at 06:33

How to copy to client clipboard on asp.net button click

1 Answers1